Stencil JS不适用于非默认导入

Question

I'm using BabylonJS in a StencilJS app, and I can only seem to import in a very specific way.

For instance I can't do:

import { Engine, Scene } from "babylonjs";

It says 'Engine' is not exported by node_modules\\babylonjs\\babylon.js But it is..

I can do:

import BABYLON from 'babylonjs';

and use it like

private _scene: BABYLON.Scene;

I'd like for the former to work. Any advice?

The first way is how most tutorials do it, and I refuse to believe SencilJS is just not capable of that. I must be missing something

Answer 1

BabylonJS is provided in two versions ( ES5 and ES6 ). The issue you are referring to is related to ES5 version of package.

If you do smth like this in your code

import * as babylon from 'babylonjs';
console.log(babylon);

and look into the console, you will see next:

{default: Module, __moduleExports: Module, babylonjs: undefined}

That's why decomposition is not working, it's not an object that can be serialized the way you expect.

In documentation they say

import { Engine, Scene } from 'babylonjs';

NOTE: if you can't make this import method to work, go to the section on typescript and webpack below.

However, I failed to make it work for ES5 version. The correct way, as to me would be to use ES6 version of package, which can be installed as

npm install -S @babylonjs/core

This version allows you to use ES6 packages together with tree shaking and other useful features.

Your module import, in this case, would look exactly as you wish:

import {Engine, HemisphericLight, Mesh, Scene} from '@babylonjs/core';

Here is a small example I've done to prove my words.

Please, let me know if I got you wrong and you expected to have smth different or you need some additional explanations or materials - I'll be happy to assist.