Webpack入门，模块打包之ES6 Module

ZERO • 2022年11月11日 • 教程 • 441 views

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

Webpack入门，模块打包之ES6 Module

导出

导入

扩展

相关推荐