javascript - Stencil JS 與非預設匯入無法正常運作

我在 StencilJS 應用中使用 BabylonJS，但我似乎只能以非常特定的方式進行導入。

例如，我做不到：

import { Engine, Scene } from "babylonjs";

它顯示 'Engine' 未被 node_modules\babylonjs\babylon.js 輸出 但它是有的..

我可以做：

import BABYLON from 'babylonjs';

然後像使用它一樣使用

private _scene: BABYLON.Scene;

我希望前者能奏效。有什麼建議嗎？

第一種方法是大多數教程所採用的，我拒絕相信 SencilJS 根本無法做到這一點。我一定是漏掉了什麼。

答案＃1

BabylonJS 提供兩個版本（ES5 和 ES6）。您提到的問題與套件的 ES5 版本有關。

如果你在你的程式碼中做這種事情

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

並查看控制台，你將看到接下來的內容：

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

這就是為什麼分解不起作用，因為它不是一個可以按你所期望的方式序列化的對象。

在文件中他們說

import { Engine, Scene } from 'babylonjs';

注意：如果你無法讓這個匯入方法運作，請參閱下方關於 TypeScript 和 Webpack 的章節。

然而，我未能使其在 ES5 版本中正常運行。對我而言，正確的方法應該是使用該套件的 ES6 版本，可以安裝為

npm install -S @babylonjs/core

此版本允許你將 ES6 套件與樹搖以及其他實用功能一起使用。

在這種情況下，你的模組匯入看起來將完全如你所願：

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

這是一個我做的小例子，用來證明我的話。

請告訴我，如果我理解錯了你的意思，或者你原本期待得到不同的東西，或者你需要一些額外的解釋或資料——我會很樂意提供幫助。