ES模块的基本用法常见使用问题

本文作者：高峰，360奇舞团前端工程师，W3C WoT工作组成员。

ES6中引入了模块（Modules）的概念，相信大家都已经挺熟悉的了，在日常的工作中应该也都有使用。

本文会简单介绍一下ES模块的优点、基本用法以及常见问题。

着重介绍3个使用ES模块的常见问题：

1. 如何在浏览器中下快速使用export/import?

2. 如何在Node下快速使用export/import?

3. 当心，不要修改export输出的对象，尽管你能改

一、ES模块的优点

ES模块的引入主要有以下几个优点：

1. 可以将代码分割成功能独立的更小的文件。

2. 有助于消除命名冲突。

3. 不再需要对象作为命名空间（比如Math对象），不会污染全局变量。

4. ES6 模块在编译时就能确定模块的依赖关系，以及输入和输出的变量，从而可以进行静态优化。

二、ES模块的基本用法

模块功能中主要有以下几个关键词：export、import、as、default、*。

• export用于规定输出模块的对外接口

• import用于输入模块提供的接口

• as用于重命名输出和输入接口

• default用于指定模块输出的默认接口

• *表示输入模块的所有接口。

2.1 export

2.1.1 常规用法

export输出规定模块的对外接口，有四种常规用法：

// 用法1：直接输出一个变量声明、函数声明或者类声明

export var m = 1;

export function m() {};

export class M {};

 

// 用法2：输出内容为大括号包裹的一组变量，

// 注意不要被迷惑，export不能直接输出常规的对象，下面会给出错误示例。

var m1 = 1;

var m2 = 2;

export {m1, m2};

 

// 用法3：输出指定变量，并重命名，则外部引入时得到的是as后的名称。

var n = 1;

export {n as m};

 

// 用法4：使用default输出默认接口，default后可跟值或变量

export default 1;

var m = 1

export default m;

2.1.2 错误用法

需要注意的是，在使用export时会经常出现以下错误用法。如下代码所示：

// 用法1

export 1;

export {m: '1'};

 

// 用法2

var m = 1;

export m;

 

// 用法3

function foo() {

  export default 'bar' // SyntaxError

}

其中错误用法1和用法2相同，export必须输出一个接口，不能输出一个值（哪怕是对象也不行）或者一个已赋值的变量，已赋值的变量对应的也是一个值。上述常规用法中，export default后之所以可以直接跟值是因为default为输出的接口。

错误用法3是因为export只能出现在模块的顶层作用域，不能存在块级作用域中。如果出现在块级作用域的话，就没法做静态优化了，这违背ES6中模块的设计初衷了。

2.2 import

import命令用于引入模块提供的接口，有以下几种常见用法：

// 用法1：仅执行 my_module 模块，不输入任何值（可能没啥用，但是是合法的）

import 'my_module';

 

// 用法2：输入 my_module 的默认接口, 默认接口重命名为 m

import m from 'my_module';

 

// 用法3：输入 my_module 的 m 接口

import { m } from 'my_module';

 

// 用法4：输入 my_module 的 m 接口，使用as重命名m接口

import { m as my_m} from 'my_module';

 

// 用法5：导入所有接口

import * as all from 'my_module';

需要注意的是，如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。如下两种均不会多次执行。

// 用法1：重复引入 my_module，只执行一次

import 'my_module';

import 'my_module';

 

// 用法2：多次引入不同的接口，只执行一次

import { m1 } from 'my_module';

import { m2 } from 'my_module';

此外，import命令输入的变量都是只读的，加载后不能修改接口。

import { m } from 'my_module';

m = 1; // SyntaxError: "m" is read-only

如果m是一个对象，改写m的属性是可以的。但是笔者不建议这么做，具体内容第三部分会详细说。

错误用法

需要注意的是，import也必须在顶级作用域内，并且其中不能使用表达式和变量。其常见的错误用法示例如下：

// 用法1：不能使用表达式

import { 'm' + '1' } from 'my_module';

 

// 用法2：不能使用变量

let module = 'my_module';

import { m } from module;

 

// 用法3：不能用于条件表达式

if (x === 1) {

  import { m } from 'module1';

} else {

  import { m } from 'module2';

}

三、常见的使用问题

3.1 如何在浏览器中下快速使用import?

各大浏览器已经开始逐步支持ES模块了，如果我们想在浏览器中使用模块，可以在script标签上添加一个type="module"的属性来表示这个文件是以module的方式来运行的。如下：

// myModule.js

export default {

  name: 'my-module'

}

 

// script脚本引入

<script type="module">

  import myModule from './myModule.js'

 

  console.log(myModule.name) // my-module

</script>

不过，由于ES的模块功能还没有完全支持，在不支持的浏览器下，我们需要一些回退方案，可以通过nomodule属性来指定某脚本为回退方案。如下，在支持的浏览器中进行提示。

<script type="module">

  import myModule from './myModule.js'

</script>

 

<script nomodule>

  alert('你的浏览器不支持ES模块，请先升级！')

</script>

如上，当浏览器支持type=module时，会忽略带有nomodule的script；如果不支持，则忽略带有type=module的脚本，执行带有nomodule的脚本。

在使用type=module引入模块时还有一点需要注意的，module的文件默认为defer，也就是说该文件不会阻塞页面的渲染，会在页面加载完成后按顺序执行。

3.2 如何在Node下快速使用export/import?

相信大家都遇到过如下错误：

当我们直接在node下执行包含ES模块的的代码时，就会看到如上报错，这是因为Node还没有原生支持ES模块。但有的时候我们又想在Node下使用，那么该如何做呢？

下面介绍两种快捷的方法，一种是Node原生支持的，一种需要借助Babel进行编译。

3.2.1 Node原生支持

Node从9.0版本开始支持ES模块，可以在flag模式下使用ES模块，不过这还处于试验阶段（Stability: 1 - Experimental）。其用法也比较简单，执行脚本或者启动时加上--experimental-modules即可。不过这一用法要求import/export的文件后缀名必须为*.mjs。

node --experimental-modules test-my-module.mjs

 

// test-my-module.mjs

import myModule from './myModule.mjs'

 

console.log(myModule.name) // my-module

这是Node原生支持的方法，但是对文件的后缀名有限制，但是现阶段，我们在项目中的代码应该还是以.js为后缀居多，所以大多数情况下我们还是会通过编译使用ES模块。

下面我们就介绍下如何快速编译并使用ES模块。

3.2.2 借助babel-node执行包含ES模块代码的文件

平时我们可能会借助构建工具对ES模块，可能是借助Webpack/Rollup等构建工具进行编译，这些工具配置起来都相对繁琐。

有时，我们只想简单的执行某些代码，而其中又包含ES模块代码，就会发生问题，因为node默认不支持。这时候如果进行一堆配置来使其支持的话，又太过麻烦。

下面我给大家介绍一种看起来更加快捷的方法。

1. 安装babel-cli和babel-preset-env，并将其保存为开发依赖。

2. 在根目录创建.babelrc文件，在其中添加如下配置。

   {

        "presets": ["env"]

    }

    

3. 通过./node_modules/.bin/babel-node index.js或npx babel-node index.js执行脚本。其中babel-node为babel-cli自带。

怎么样，是不是相当快捷了，而且近乎于0配置。

3.3 当心，不要修改export输出的对象

前面有提到如果export输出的接口是一个对象，那么是可以修改这个对象的属性的。

而我的建议是，尽管你能改，也不要修改。

大家可能都会有这样一个常规的用法，即在编写某个组件时，可能会存在包含基础配置的代码，我们姑且称其为options.js，其输出一堆配置文件。

// options.js

export default {

  // 默认样式

  style: {

    color: 'green',

    fontSize: 14,

  }

}

如果你没有类似需求，你可以想象下，你现在要把EChart的某个图表抽象成自己代码库里的组件，那么这时候应该就有一大堆基础配置文件了。

既然称其为基础配置，那么言外之意就是，根据组件的用法不同，会一定程度上对配置进行修改。比如我们会在引入后将颜色改为红色。

// use-options.js

import options from "./options.js";

 

console.log(options); // { style: { color: 'green', fontSize: 14 } }

 

options.style.color = "red";

这时候就需要格外注意了，如果我们直接对输入的默认配置对象进行修改，就可能会导致一些bug。

因为export输出的值是动态绑定的，如果我们修改了其中的值，就会导致其他地方再次引入该值时会发生变化，此时的默认配置就不是我们所设想的默认配置了。如上例，我们再次引入基础配置后，就会发现颜色的默认值已经变成红色了。

// use-options-again.js

import useOptions from "./use-options.js

import options from "./options.js";

 

console.log(options); // { style: { color: 'red', fontSize: 14 } }

所以，笔者建议，当我们有需求对输入的对象接口进行改变时，可以先对其进行深度复制，然后在进行修改，这样就不会导致上述所说的问题了。如下所示：

// use-options.js

import _ from "./lodash.js";

import options from "./options.js";

 

const myOptions = _.cloneDeep(options);

console.log(myOptions); // { style: { color: 'green', fontSize: 14 } }

myOptions.style.color = "red";

四、总结

本文只是简单点的介绍了下ES模块的基本用法，还有一些用法，如import和export的结合使用等，这些大家可以结合MDN或者其他网站进行了解。本文主要是介绍了以下笔者及身边的同事在使用ES模块时会存在的一些疑问，希望对大家有一点帮助。

参考内容

1. Export | MDN

2. Import | MDN

3. 7 Different Ways to Use ES Modules Today!

4. Import, Export, Babel, and Node