javascript - Stencil JS 不适用于非默认导入

Question

我在 StencilJS 应用程序中使用 BabylonJS，我似乎只能以非常特定的方式导入。

例如我做不到:

import { Engine, Scene } from "babylonjs";

它说 'Engine' 不是由 node_modules\babylonjs\babylon.js 导出的但它是..

我能做到:

import BABYLON from 'babylonjs';

并像使用它一样

private _scene: BABYLON.Scene;

我希望前者能够工作。有什么建议吗？

第一种方式是大多数教程的做法，我不相信 SencilJS 不能做到这一点。我一定是遗漏了什么

Answer 1

BabylonJS提供两个版本( ES5 和 ES6 )。您提到的问题与 ES5 版本的包有关。

如果你在代码中这样做

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

然后查看控制台，您将看到下一个:

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

这就是分解不起作用的原因，它不是可以按您期望的方式序列化的对象。

他们在文档中说

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.

然而，我未能让它适用于 ES5 版本。正确的方法，对我来说是使用 ES6 版本的包，可以安装为

npm install -S @babylonjs/core

此版本允许您将 ES6 包与 tree shaking 和其他有用的功能一起使用。

在这种情况下，您的模块导入看起来完全如您所愿:

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

这是一个small example我已经证明了我的话。

请让我知道如果我误解了你，你希望有一些不同或者你需要一些额外的解释或 Material - 我很乐意提供帮助。