ES6：模块化方式 import from + export

本文链接： https://blog.csdn.net/qq_39025670/article/details/99086960

在ES6之前，模块化加载方案主要有CommonJS和AMD（异步模块加载机制）两种。

CommonJS模块化方式
require + module.exports

es6模块化方式
import from + export

CommonJS模块是“运行时加载”，ES6模块是“编译加载”或者静态加载，即ES6可以在编译时就完成模块加载，效率比CommonJS模块的加载方式高，这是两者的区别之一。

1.export命令

export命令可以用来输出变量、函数和类。比如

export let name = 'Tom';

export function getName() { ... };

export class People() { ... };

当然，这里我们还可以这样写

let name = 'Tom';

function getName() { ... };

class People() { ... };

export { name, getName, People };

这种写法能让我们更加直观的看见对外暴露了哪些接口，也是比较推荐的写法。

通常情况下，export输出的变量就是本来的名字，但我们也可使用as关键字重命名，as后面跟新的名字。

export { name as myName }

我们还要注意一点，下面这些错误写法

// 报错
let name = 'Tom';
export name;

// 报错
function getName() { ... };
export getName;

// 报错
class People() { ... };
export People;

正确的写法是用大括号括起来，或则直接在声明前加export。

另外，export输出的接口与其对应的值是动态绑定的关系，这一点和CommonJS方式不同（CommonJS模块输出的是值的缓存，不存在动态更新）。比如

export let name = 'Tom';
setTimeout(() => { name = 'Jerry' }, 500);

上面的值先输出name为Tom，500ms后变为Jerry。

最后一点，export命令需要处于模块的顶层，如果处于块级作用域内，就会报错。

// 报错
if (true) { export let name = 'Tom' }

2.import命令

import命令用来导入模块，通常情况下，导入的模块名必须与导出的模块名一致，但我们也可以用as关键字进行重命名

import { name as myName } from './info';

这里from后面可以是指定模块文件的位置（.js后缀可以省略），也可以是模块名。如果是模块名，那么必须有配置文件告诉javascript引擎该模块的位置。比如，我们导入axios

import axios from 'axios';

这里的axios为何没加大括号呐？后面会解释。

值得注意的是，import具有提升效果，会提升到头部并首先执行。所以，下面这种写法是ok的

getName();
import { getName } from './info';

我们再来看看一些错误的写法

// 报错
import { name + ' and Jerry' } from './info';

// 报错
let module = './info';
import { name } from module;

// 报错
if (true) { import { name } from './info' };

上面三种写法都会报错，因为它们用到了表达式、变量和块级作用域。

最后一点，尽量不要将CommonJS模块的require命令和ES6模块的import命令混合使用。因为import是在静态分析阶段执行，所以是一个模块中最早被执行的。比如下面的代码可能得不到预期效果

require('core-js/modules/es6.symbol');
require('core-js/modules/es6.promise');

import React from 'React';

接下来，我们在介绍一个常用的加载方式：模块的整体加载

除了指定加载某个输出值外，还可以用整体加载（即星号*）来指定一个对象，将所有输出值都添加在这个对象上。

import * as info from './info';

info.name;
info.getName();
new info.People();

3. export default 命令

在 vue 开发中，我们经常能看见这个命令。使用 export default 命令可以为模块指定默认输出。

export default function () {...}

我们在导入的时候就可以任意取名字了，但这时不能加大括号

import getName from './info';

这里就能解释前面导入 axios 模块时为何不用加大括号了吧。

这里要注意的是，export default命令在一个模块中只能使用一次，且不能像下面这样再使用export导出其他变量

export default function () {...}
export let name = 'Tom';

当然，同时使用这两种方式也是可以的，但写法就不一样了，这里不再深入。

结束语：关于模块化的知识点还包括“export与import的复合写法”、“模块的继承”、“跨模块常量”与“import()动态导入”，一般来讲不是特别的常用，可以作为拓展学习，可以参考阮一峰老师的《ES6入门》。