Stencil JS 不适用于非默认导入

Question

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

比如我做不到：

import { Engine, Scene } from "babylonjs";

它说 'Engine' is not exported by node_modules\babylonjs\babylon.js 但它是..

我能做到：

import BABYLON from 'babylonjs';

并像

一样使用它

private _scene: BABYLON.Scene;

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

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

Answer 1

BabylonJS is provided in two versions (ES5 and 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我已经证明了我的话。

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

Stencil JS not working with non-default imports