Building with webpack and es6 modules

[alamboley]

Hello,

I've a babylon project made with this template https://github.com/RaananW/babylonjs-webpack-es6.

I try to import only what is needed: import { AStar } from "yuka/src/graph/search/AStar"; but I get errors:

Module not found: Error: Can't resolve 'yuka/src/graph/search/AStar'

How to prevent using a global import like: import { AStar, Graph, GraphUtils, NavEdge } from "yuka"; ?

[Mugen87]

I always use rollup for my builds. When using imports like below, the bundler correctly performs treeshaking and only includes into the build file what is actually necessary.

import { AStar, Graph, GraphUtils, NavEdge } from "yuka";

Can you please ensure that Webpack does not treeshake when using the global import?

[Mugen87]

Module not found: Error: Can't resolve 'yuka/src/graph/search/AStar'

Maybe it's because of this line: https://github.com/Mugen87/yuka/blob/b95f3f0b51d1279d51ace81295d7dd5bd3aca6cc/.npmignore#L4 That will ensure that no src directory is present in the npm package.

However, I do not like the approach of adding source files to the npm package since treeshaking shouldn't make this necessary. I'm also not a fan of explicit imports like import { AStar } from "yuka/src/graph/search/AStar"; since they easily break if the location of the source file changes. Devs shouldn't be aware of the source's code internal structure of a npm package.

[alamboley]

Glad to know it should be done automatically.

Unfortunately, in babylon, I've to precise each path import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera"; otherwise doing import { ArcRotateCamera } from "@babylonjs/core"; import the whole package. I can easily check with the output file size. Not sure how to check in the exported bundle if yuka is full or not.

[Mugen87]

Try to import a single class without dependencies like State. The bundle should contain no other Yuka classes.

[alamboley]

It seems it's ok 👍