JavaScript的旧版本没有导入,包含或要求,因此已经开发了许多解决此问题的方法。
但是自2015年(ES6)起,JavaScript有了ES6模块标准即可在Node.js中导入模块,大多数现代浏览器也支持该模块。
为了与旧浏览器的兼容性,这样的构建工具的WebPack和汇总和/或transpilation工具,如巴贝尔都可以使用。
从v8.5开始,带有标志的Node.js支持 ECMAScript(ES6)模块--experimental-modules
,并且至少从不带有标志的Node.js v13.8.0 开始支持 ECMAScript(ES6)模块。要启用“ ESM”(相对于Node.js先前的CommonJS样式的模块系统[“ CJS”]),您可以"type": "module"
在中使用package.json
或为文件提供扩展名.mjs
。(类似地,.cjs
如果您的默认值为ESM,则可以命名用Node.js的先前CJS模块编写的模块。)
使用package.json
:
{
"type": "module"
}
然后module.js
:
export function hello() {
return "Hello";
}
然后main.js
:
import { hello } from './module.js';
let val = hello(); // val is "Hello";
使用.mjs
,您将拥有module.mjs
:
export function hello() {
return "Hello";
}
然后main.mjs
:
import { hello } from './module.mjs';
let val = hello(); // val is "Hello";
自Safari 10.1,Chrome 61,Firefox 60和Edge 16开始,浏览器已经支持直接加载ECMAScript模块(不需要像Webpack这样的工具)。请在caniuse上查看当前支持。无需使用Node.js.mjs
扩展名;浏览器完全忽略模块/脚本上的文件扩展名。
<script type="module">
import { hello } from './hello.mjs'; // Or it Could be simply `hello.js`
hello('world');
</script>
// hello.mjs -- or it Could be simply `hello.js`
export function hello(text) {
const div = document.createElement('div');
div.textContent = `Hello ${text}`;
document.body.appendChild(div);
}