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 shake 和其他有用的功能一起使用。

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

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

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

如果我误解了您的意思，并且您希望有不同的结果，或者您需要一些额外的解释或 Material ，请告诉我 - 我很乐意为您提供帮助。