Chrome和ES6中的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: module is not defined

我想我应该使用export class { ... }，但NodeJS不支持吗？如何使此模块适用于Chrome和NodeJS？

Answer 1

ES6 modules are currently supported under a flag，因此可以让您的文件在两种环境中都能正常工作。需要注意的一些重要事项：

• 在Node中，文件必须具有.mjs扩展名，因此Node事先知道将其加载为ES模块而不是CommonJS模块
• 浏览器不会自动搜索.js或.mjs扩展名。您必须在导入时自行添加它们，例如import { Edge } from './edge.mjs'

然而，该技术仍然是新的和实验性的，并且没有关于该主题的大量文档或材料。如果您想支持旧节点环境和浏览器，那么依赖本机技术并不是一个好主意。

如果您想支持较旧的环境，可以使用webpack之类的工具将文件“捆绑”到一个可以运行任何环境的大型JS文件中。

最后，look more into ES modules and gain a good understanding of how the syntax works in detail (defaults especially)，所以稍后你会遇到更少的问题。

Answer 2

使用Babel并编译代码