参考:
一文让你彻底搞清楚javascript中的require、import与export
w3school : ECMAScript 6 - ECMAScript 2015
w3school : ECMAScript 5 - JavaScript 5
Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也就没有”模块”(module)了。
在 ES6 前, 实现模块化使用的是 RequireJS 或者 seaJS(分别是基于 AMD 规范的模块化库, 和基于 CMD 规范的模块化库)。
ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6 的模块化分为导出(export) @与导入(import)两个模块。
参考:
Javascript(es2016) import和require用法和区别
import只能用于静态导入,就是必须在文件开始的时候,在最上层就写好。而require就可以实现动态加载。
加载方式 | 规范 | 命令 | 特点 |
---|---|---|---|
运行时加载 | CommonJS/AMD | require | 社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。 |
编译时加载 | ESMAScript6+ | import | 语言规格层面支持模块功能。支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。 |
一.require
require是Commonjs的规范,node应用是由模块组成的,遵从commonjs的规范。用法:
a.js
function test (args) {
// body...
console.log(args);
}
module.exports = {
test
};
b.js
let { test } = require('./a.js');
test('this is a test.');
require的核心概念:
- 在导出的文件中定义module.exports,导出的对象类型不予限定(可为任意类型)。
- 在导入的文件中使用require()引入即可使用。
- 本质上,是将要导出的对象,赋值给module这个对象的exports属性,
在其他文件中通过require这个方法来访问exports这个属性。
上面b.js中,require(./a.js) = exports 这个对象,然后使用es6取值方式从exports对象中取出test的值。
二.import
import是es6为js模块化提出的新的语法,import (导入)要与export(导出)结合使用。用法:
a.js:
export function test (args) {
// body...
console.log(args);
}
// 默认导出模块,一个文件中只能定义一个
export default function() {
console.log("export default");
};
export const name = "lyn";
b.js:
// _代表引入的export default的内容
import _, { test, name } from './a.js';
test(`my name is ${name}`);
三、commonjs模块与ES6模块的区别
-
1.commonjs输出的,是一个值的拷贝,而es6输出的是值的引用;
-
2.commonjs是运行时加载,es6是编译时输出接口;