CodingJavaScriptBasic
Source
Edit
History

模块化 - JavaScript

ES6

导出

声明时导出

1
2
3
4
5
6
7
8
9
10
11
12
// 导出数组
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

// 导出 const 声明的变量
export const MODULES_BECAME_STANDARD_YEAR = 2015;

// 导出类
export class User {
  constructor(name) {
    this.name = name;
  }
}

注意导出函数后面没有分号

单独导出

1
2
3
4
5
6
7
8
9
// say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}
function sayBye(user) {
  alert(`Bye, ${user}!`);
}

export {sayHi, sayBye}; // 导出变量列表

导出为（export as）

as 起别名，同导出一样

1
2
3
//   say.js
...
export {sayHi as hi, sayBye as bye};

导入

一般导入

1
2
3
4
5
//   main.js
import {sayHi, sayBye} from './say.js';

sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!

导入所有（import *）

1
2
3
4
5
// main.js
import * as say from './say.js';

say.sayHi('John');
say.sayBye('John');

明确列出我们需要导入的内容

  1. 现在的构建工具（webpack 或者其他的）把模块打包到一起，然后对其进行优化以获得更快的加载速度，并且还会删除无用的代码。
  2. 明确列出要导入的内容会使得名称较短：sayHi() 取代 lib.sayHi()。
  3. 显示导入可以更好的概述代码结构：在哪里使用了什么。它使得代码阅读和重构更容易。

导入为（import as）

as 起别名

1
2
3
4
5
//   main.js
import {sayHi as hi, sayBye as bye} from './say.js';

hi('John'); // Hello, John!
bye('John'); // Bye, John!

默认导出（export default）

默认导出只能有一个，导入时没有括号：

1
2
3
4
5
6
7
8
9
10
11
12
//   user.js
export default class User { // 只要添加“default”即可
  constructor(name) {
    this.name = name;
  }
}



//   main.js
import User from './user.js'; // 不需要花括号 {User}, 仅仅是 User 就可以了
new User('John');

export default可以没有名字，因为每个文件只有一个export default。而export不行，省略命名会出错：

1
2
3
4
5
6
7
8
9
10
export default class { // 没有类名
  constructor() { ... }
}

export default function(user) { // 没有函数名
  alert(`Hello, ${user}!`);
}

// 导出一个值而不使用变量
export default ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

先定义再导出export default：

1
2
3
4
5
function sayHi(user) {
  alert(`Hello, ${user}!`);
}

export {sayHi as default}; // 和我们在函数前添加“export default”一样

export default可以和export一起用（少见）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//   user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}


// 同时导入：
//   main.js
import {default as User, sayHi} from './user.js';
new User('John');

要把 * 作为对象导入，那么 default 属性就是默认导出：

1
2
3
4
//   main.js
import * as user from './user.js';
let User = user.default;
new User('John');

谨慎使用 export default

Re-export

1
2
export {sayHi} from './say.js';
export {default as User} from './user.js';

直接导出同时导入的内容，一般用于包管理

跨域问题

Chromium浏览器本地文件导入会有跨域问题，需要安装一个VSCode插件： Live Server

参考：
完全弄懂JavaScript模块化(导出和导入) - 知乎