模块的导出与导入

这是我参与8月更文挑战的第15天，活动详情查看：  8月更文挑战 ​

导出的方式

在声明前导出

我们可以通过在声明之前放置 export 来标记任意声明为导出，无论声明的是变量，函数还是类都可以。 例如以下

// 导出数组
export let people = ['coolFish', 'teacherGuo', 'pingan8787','ABaoGe'];
​
// 导出 const 声明的变量
export const MODULES_BECAME_STANDARD_YEAR = 2015;
​
// 导出类
export class User {
  constructor(name) {
    this.name = name;
  }
}
​
//导出函数
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}  // 在这里没有分号 ;

导出与声明分开

另外，我们可以将先声明，然后统一导出

//  life.js
function play(game) {
  alert(`play, ${game}!`);
}
​
function eat(food) {
  alert(`eat, ${food}!`);
}
​
export {helloWorld, beyWorld}; 

在上例中，我们依次声明了两个方法，然后用export导出该函数对象集合。

Export "as"

我们可以用 as 来改变导出的名称

export {helloWorld as H, beyWorld as B}; 

现在H 和 B是在外面使用的正式名称

import {H,B} from './say.js';
​
H.play('John'); // Hello, John!
B.eat('John'); // Bye, John!

Export default

模块提供了一个特殊的默认导出 export default 语法，以使“一个模块只做一件事”的方式看起来更好。 将 export default 放在要导出的实体前

export default class User { // 只需要添加 "default" 即可
  constructor(name) {
    this.name = name;
  }
}
//导入
​
import User from './user.js'; // 不需要花括号 {User}，只需要写成 User 即可
​
new User('John');

导入的方式

import*

一般我们导入的东西放在 import {...} 中

import {play, eat} from './life.js';
​
play('CF'); // play, CF!
eat('apple'); // eat, apple!

如果想要一次导入一个文件所有内容，import * as<obj>将所有内容导入为一个对象

import * as life from './life.js';
​
life.play('CF');
life.eat('apple');

但是使用这种方法并不好，有以下几个原因

0. 打包工具的打包逻辑是将所有模块打包到一起，然后进行优化，如果有未使用的模块，那么会将其删除，所以当我们全局引入的话，会影响打包工具的效率。
1. 导入的显式列表，可以更清晰的显式代码的结构和位子，使维护更加简单。
2. 明确导入的内容，会使名称更加整洁，清晰。

//  life.js
function play(game) {
  alert(`play, ${game}!`);
}
​
function eat(food) {
  alert(`eat, ${food}!`);
}
​
export {helloWorld, beyWorld}; 
​
//index.js
import * as life from './life.js';
​
life.eat('apple');

这里我们只用到了 eat ，但是我们全局引入了 life.js,所以打包的时候，会先引入play，eat，然后发现play没有用到，又把play删除掉。

import "as"

我们可以使用 as 让导入具有不同的名字。

import {play as P, eat as E} from './life.js';
​
P('CF'); // play, CF!
E('apple'); // eat, apple!