JavaScript之父Brendan Eich在最初设计这门语言时，并没有包含模块的概念。基于越来越多的工程需要，为了使用模块化进行开发，JavaScript社区涌现出了多种模块标准，其中也包括CommonJS。一直到2015年6月，由TC39标准委员会正式发布了ES6（ECMA Script 6.0），自此JavaScript语言才具备了模块这一特性。
请看下面的例子，使用ES6的方式改写前面的calculator.js和index.js
// calculator.js
export default {
name: 'calculator',
add: function(a,b) {
return a + b;
}
}// index.js
import calculator from './calculator.js';
const sum = calculator.add(5.6);
console.log(sum);从示例中可看出，ES6 Module也是将每个文件作为一个模块，每个模块拥有自身的作用域，不同的是导入、导出语句。
注意
ES6 Module会自动采用严格模式，该模式在ES5中只是一个可选项。也就是说，以前开发者可以通过选择是否在文件开始时加上use strict来控制严格模式，而在ES6 Module中不管开头是否有use strict都会采用严格模式。所以，在将原本时CommonJS的模块或者任何未开启严格模式的代码改写为ES6 Module时要注意这一点。
导出
在ES6 Module中使用export命令来导出模块。export有两种形式：命名导出与默认导出。
// 命名导出
// 写法一
export const name = 'calculator';
export const add = function(a,b) {return a + b;};
// 写法二
const name = 'calculator';
const add = function(a,b) {return a + b;};
export {name,add};
// 用此写法可以使用as关键字对变量重命名
// export {name,add as getSum};// 默认导出
// 与命名导出不同，模块的默认导出只能有一个
export default {
name: 'calculator';
add: function(a,b) {
return a + b;
}
}开发者可以将export default理解为对外输出了一个名为default变量，因此不需要像命名导出一样进行变量声明，直接导出值即可。
// 导出字符串
export default "This is default export string";
// 导出class
export default class {...}
// 导出匿名函数
export default function() {...}导入
ES6 Module中使用import语法导入模块。
// index.js
// 针对命名导出的导入写法
import {name,add} from './calculator.js';
add(5,6);
// 与命名导出类似，也可在导入时，使用as关键字对变量重命名
import {name,add as getSum} from './calculator02.js';
// 如果命名导出多个变量，可以使用整体导入的方式
import * as calculator from 'calculator.js';
console.log(calculator.name);
// 针对默认导出的导入写法
import calculator from "./calculator.js";
const sum = calculator.add(9,8);
console.log("sum",sum);加载带有命名导出的模块时，import后面要跟一对大括号来将导入的变量包裹起来，并且这些变量名应该与导出的变量完全一致。导入变量的效果相当于在当前作用域下声明了这些变量，并且不可对其进行更改，也就是所导入的变量都是只读的。
提示
使用import * as <myModule>可以把所有导入的变量作为属性值添加到<myModule>对象中，从而减少对当前作用域的影响。这点在处理默认导出上很类似，import后面直接跟变量名，并且这个名字可以自由指定，它指代了模块中默认导出的值。从原理上可以理解为import {default as <myModule>} from ‘./calculator.js’
扩展
在工程中，有时需要把某一个模块导入之后立即导出，比如专门用来集合所有页面或组件的入口文件。此时可以采用复合写法
// 复合写法
// 此写法只支持采用命名导出方式的模块，如果被导入模块使用默认导出方式，只能将导入和导出分开写
export {name,add} from './calculator.js';示例代码仓库
https://gitee.com/zero_79152105/webpack-vblog
原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/webpack-es6-module.html
微信扫一扫 
支付宝扫一扫 
