如何在瀏覽器中使用已編譯的ES6到ES5文件？

Question

我在ES6中有兩個模塊：

//mycalss.js
class MyClass {
}
export {MyClass};

//main.js
import {MyClass} from './../src/myclass';

我正在使用Laravel-mix來處理編譯和捆綁過程。

最后，我得到一個main.js

我將此文件鏈接到html中。

<script type="text/javascript" src="main.js"></script>

並嘗試引用類MyClass ：

<script type="text/javascript">

    var object = new MyClass();

</script>

但是引發了Uncaught ReferenceError: MyClass is not defined 。

因此，如何在html中使用從es6編譯為es5的類？

Answer 1

ES6模塊具有模塊范圍。 這樣可以防止它們將變量泄漏到全局范圍。 這正是模塊化的目的。

為了在全局范圍內使用ES6模塊中的項（同樣適用於實現模塊模式的CommonJS模塊或IIFE），必須將它們定義為全局項。 對於客戶端腳本，這意味着應將它們定義為捆綁的應用程序內的window屬性：

window.MyClass = MyClass;

這表明潛在的XY問題。 更好的選擇是重新考慮為什么應在全球范圍內使用它的原因。 如果已經捆綁了ES6應用程序，那么它也應該從內聯<script type="text/javascript">...</script>運行代碼。

Answer 2

您可以使用Babel在瀏覽器中將JavaScript從ES6編譯為ES5。

通常，您必須使用webpack為您自動執行此操作，然后將腳本插入HTML。