详解es6的export和import命令

1、概述

一直以来开发vue项目，对export和import的用法都比较模糊，看别人怎么写我就照葫芦画瓢，不报错或者功能实现就行，完全不懂其中的原理，今日闲下来了，就揭穿它们的真面目吧！

历史上，JavaScript是没有模块的概念的，就像它没有类的概念一样，就连css都有@import，所以社区制定了CommonJS和AMD规范实现模块加载。为此ES6新增了export和import命令实现了模块功能，而且它的实现方式简单得不可思议，完全取代了CommonJS和AMD，现已成为浏览器和服务器通用的模块解决方案。

ES6的模块设计思想是静态化的，它在编译时确定模块的依赖关系以及输入和输出的变量，也就是说它在编译时就完成了模块加载，我们称为‘编译时加载’或者静态加载，效率上自然比CommonJS要高得多。模块功能主要由两个命令构成：export和import。

export命令规定模块的对外接口
import命令输入其他模块提供的功能

2、export

一个模块是一个独立的文件，该文件内部的所有变量，外部无法获取，如果希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。所以我们通常在vue项目中引入第三方js文件（比如粒子动画）时，往往需要改动此文件，并将最终的变量或者函数或者类暴露出来才能在vue文件中通过import引入。
export可以输出变量、函数和类。

// export.js
// bad
export const name = '飘摇的浅樱';
export const age = 17;
export const gender = '女';
export function foo() {
  console.log('函数foo');
}
export class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  getInfo() {
    return `姓名：${this.name},性别：${this.gender},年龄：${this.age}`;
  }
}


// good
const name = '飘摇的浅樱';
const age = 17;
const gender = '女';
function foo() {
  console.log('函数foo');
}
class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
  getInfo() {
    return `姓名：${this.name}，性别：${this.gender}，年龄：${this.age}`;
  }
}
export { 
  name, 
  age, 
  gender, 
  foo, 
  Person 
};

上面两种写法是等价的，但是优先推荐使用下面的写法，因为在文件末尾你能一眼就看清楚输出了哪些变量。
export输出的变量可以使用as关键字重命名。

// export.js
const arr = ['html', 'css', 'js']
export { arr as technologies }

// import.js
import { technologies } from './export.js';

export命令规定的是对外的接口，因此必须与模块内部的变量建立一一对应的关系。

// 错误写法一
export 10;

// 错误写法二
var n = 10;
export n;

// 正确写法一
export const n = 10;

// 正确写法二
const n = 10;
export {n};

// 正确写法三
const n = 10;
export {n as m};

正确写法中，import的时候通过变量n或m拿到值10。而在错误写法中，输出的只有值而没有变量，缺少对应关系。

3、import

使用export命令定义了对外接口之后，就能够使用import命令加载此模块。

// import.js
import { name, age, gender, foo, Person } from './export.js';
console.log(name, age, gender);
foo();
const p = new Person('飘摇的浅樱', 17, '女')
const info = p.getInfo()
console.log(info)

// import.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="import.js" type="module"></script>
</body>
</html>

结果如下：

从例子中可以看出，import的{}内的变量必须与export输出的变量名称相同，否则无法加载。

import { name1 } from './export.js';

import命令输入的变量都是只读的，因为它的本质是输入接口，所以不允许在加载模块的脚本里面改写接口。

import { obj } from 'export.js';
obj = {};  // Syntax Error : 'obj' is read-only;

4、export default

在第三点中，我们已经知道了，import的变量必须与export输出的变量名称相同，这个规则导致我们必须知道输出的变量名称是什么才能顺利import，这就增加了我们阅读文档的时间，不利于快速上手。export default的出现就是为了让用户不用知道模块内定义的变量就能加载模块，它为模块指定了默认输出。

// export.js
const tellYourName = (name) => name
export default tellYourName;

// import.js
import tellName from './export.js'
const name1 = tellName('飘摇的浅樱')
console.log(name1)  // 飘摇的浅樱

可以看到import后面的tellName没有加花括号{}，并且名称和export.js中输出的变量名称不同，这样我们在引用第三方模块时就无需知晓内部export的变量名称是什么。
export default命令在一个模块中只能使用一次。

5、import()

import命令做不到node的require的动态加载功能，因此ES2020提案引入import()函数，支持动态加载模块。

import(spec)

参数spec代表加载的模块的位置，import命令能接受什么参数import()函数就能接受什么参数，区别只是后者是动态加载。
我所接触到的import()的应用最常见的就是路由懒加载了。因为当打包构建应用时，JavaScript包会变得非常大，影响页面加载。这时候我们将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。写法如下：

// index.js
{
  path: 'home',
  component: () => import('@/views/page/home'),
  name: 'home',
  meta: {
    title: '首页'
  },
}

上面例子中，是再熟悉不过的路由文件了，它代表的就是当访问home这个路由时，才加载home组件，其他路由均使用此方法，就能大大减小js包体积，加快页面加载速度。

import()函数可以用在任何地方；
import()函数与所加载的模块没有任何静态连接关系；
import()函数类似于Node的require方法，但它是异步加载。

6、关键知识点总结

（1）ES6新增export和import两个命令实现模块加载；
（2）ES6模块自动采用严格模式，而不管你有没有在模块头部加上'use strict;'；
（3）export命令可以输出变量、函数和类；
（4）export输出的变量就是本来的名字，但是可以使用as关键字重命名，引用的时候就是重命名的那个名称；
（5）export命令规定的是对外的接口，因此必须与模块内部的变量、函数或类建议一一对应关系；
（6）export命令输出的接口与其对应的值是动态绑定关系，意思是通过此接口可以获取模块内部实时的值；
（7）import和export命令只能在模块的顶层，不能在代码块之中（比如在函数或者if语句之中）；
（8）import()函数在路由懒加载、条件加载中最能体现价值；
（9）比较一下import各个写法的含义：
import '@/style/index.scss';
执行所加载的模块，但是不输入任何值

import HelloWorld from "@/components/HelloWorld.vue";
引用组件（export default）

import Vue from 'vue';
引用Vue模块（export default）

import { uploadOss as alias } from '@/utils/upload';
引用uploadOss并重命名为alias（export）

import { queryList, addUser } from '@/api/home.js';
引用home.js中的变量或函数或类（export）

import * as alias from 'vue-router';
加载整个模块（export），alias.xxx

import _, { each, forEach } from 'lodash';
引入默认方法和其他接口

参考地址：https://es6.ruanyifeng.com/#d...

详解es6的export和import命令

1、概述

2、export

3、import

4、export default

5、import()

6、关键知识点总结

浅樱

引用和评论

如何实现一个楼中楼的评论系统

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高