Chrome 和 Node 中的 ES6 模塊...`export function` 還是 `module.exports = function`？

Question

我有一個這樣的模塊：

module.exports = class Edge {
    constructor(vertex1, vertex2) {
        this.vertex1 = vertex1;
        this.vertex2 = vertex2;
    }
}

我想將它導入到一些 NodeJS 文件和 Chrome 中的一些前端文件中。 我知道 Chrome 現在支持 ES6 模塊，但是導入給我帶來了麻煩：

ReferenceError：模塊未定義

我想我應該使用export class {... } ，但 NodeJS 不支持它，對嗎？ 如何讓這個模塊同時適用於 Chrome 和 NodeJS？

Answer 1

ES6 模塊目前在 flag 下受支持，因此可以讓您的文件在兩種環境中本地工作。 需要注意的一些重要事項：

• 在 Node 中，該文件必須具有 .mjs 擴展名，因此 Node 事先知道將其加載為 ES 模塊而不是 CommonJS 模塊
• 瀏覽器不會自動搜索 .js 或 .mjs 擴展名。 你必須在導入時自己添加它們，例如import { Edge } from './edge.mjs'

然而，這項技術仍然是新的和實驗性的，並且沒有很多關於這個主題的文檔或材料。 如果您想支持較舊的節點環境和瀏覽器，那么依賴本機技術並不是一個好主意。

如果你想支持舊環境，你可以使用像webpack這樣的工具將你的文件“捆綁”成一個任何環境都可以運行的大 JS 文件。

最后，更多地研究 ES 模塊並深入了解語法的詳細工作原理（尤其是默認值） ，這樣以后遇到的問題就會少一些。

Answer 2

使用Babel並編譯你的代碼