Bootstrap

javascript中的require、import与export

参考:

js使用require 和 import 引入依赖的区别?

一文让你彻底搞清楚javascript中的require、import与export

菜鸟教程: 4.4 ES6 模块

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/AMDrequire社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。
编译时加载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是编译时输出接口;

;