ES6的二三事(二)-模块化

在之前的 javascript 中一直是没有模块系统的,前辈们为了解决这些问题,提出了各种规范, 最主要的有CommonJS和AMD两种。前者用于服务器,后者用于浏览器。而 ES6 中提供了简单的模块系统,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

基本用法

es6 中新增了两个命令 exportimport , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个 变量,就必须使用export关键字输出该变量。下面是一个JS文件,里面使用export命令输出变量。

1
2
3
4
5
6
7
8
9
// math.js
export const add = function (a, b) {
return a + b
}
export const subtract = function (a, b) {
return a - b
}

使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。

1
2
3
4
5
// main.js
import { add, subtract } from './test.js'
add(1, 2)
substract(3, 2)

export 详细用法

上面介绍了模块化最基础的用法,export 不止可以导出函数,还可以导出对象,类,字符串等等

1
2
3
4
5
6
7
8
9
10
export const obj = {
test1: ''
}
export const test = ''
export class Test {
constructor() {
}
}

export的写法,除了像上面这样,还有另外一种。

1
2
3
4
5
6
7
8
let a = 1
let b = 2
let c = 3
export {
a,
b,
c
}

上面代码在export命令后面,使用大括号指定所要输出的一组变量。它与前一种写法是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。

通过 as 改变输出名称

1
2
3
4
5
6
7
8
9
// test.js
let a = 1
let b = 2
let c = 3
export {
a as test,
b,
c
}
1
import { test, b, c} from './test.js' // 改变命名后只能写 as 后的命名

上面啊的写法中,import 中需要指定加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。

export default 指定默认输出, import 无需知道变量名就可以直接使用

1
2
3
4
5
// test.js
export default function () {
console.log('hello world')
}
1
2
3
import say from './test.js' // 这里可以指定任意变量名
say() // hello world

有了export default命令,加载模块时就非常直观了,以一些常用的模块为例

1
2
3
import $ from 'jQuery' // 加载jQuery 库
import _ from 'lodash' // 加载 lodash
import moment from 'moment' // 加载 moment

import 详细用法

import 为加载模块的命令,基础使用方式和之前一样

1
2
3
4
5
6
// main.js
import { add, subtract } from './test'
// 对于export default 导出的
import say from './test'

通过 as 命令修改导入的变量名

1
2
3
import {add as sum, subtract} from './test'
sum (1, 2)

加载模块的全部

除了指定输出变量名或者 export.default 定义的导入, 还可以通过 * 号加载模块的全部.

1
2
3
4
5
6
7
8
9
// math.js
export const add = function (a, b) {
return a + b
}
export const subtract = function (a, b) {
return a - b
}
1
2
3
4
import * as math from './test.js'
math.add(1, 2)
math.subtract(1, 2)

开始使用 ES6

上面介绍了,es6 中模块的使用方式,但是现在es6的模块化,无论在浏览器端还是 node.js 上都没有得到很好的支持,所以需要,一些转码的工具。使我们可以用es6的方式来编码,最后输出es5的代码。

这里推荐一款基于 es6 模块化方式的打包神器 rollup,它使用 Tree-shaking 的技术打包,基本可以做到零冗余的代码,而且配置简单,打包速度也够快。

安装 rollup

首先在 package.json 中加上 rollup 打包依赖的包

1
2
3
4
5
6
7
8
9
10
11
12
{
// ...
"devDependencies": {
"babel-core": "^6.13.0",
"babel-preset-es2015-rollup": "^1.1.1",
"rollup": "^0.34.3",
"rollup-plugin-babel": "^2.6.1",
"rollup-plugin-commonjs": "^3.3.1",
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-uglify": "^1.0.1"
}
}

编写打包程序

下面是我的打包程序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// build.js
var rollup = require('rollup');
var babel = require('rollup-plugin-babel'); // babel 插件
var uglify = require('rollup-plugin-uglify'); // js 混淆压缩插件
var npm = require('rollup-plugin-node-resolve'); // 使用第三方包依赖
var commonjs = require('rollup-plugin-commonjs'); // CommonJS模块转换为ES6
rollup.rollup({
entry: 'src/index.js', //入口文件
plugins: [ // 插件配置
npm({ jsnext: true, main: true }),
commonjs(),
uglify(),
babel({
exclude: 'node_modules/**',
presets: [ "es2015-rollup" ]
})
]
}).then(function(bundle) {
// 打包之后生成一个 `budble` 把它写入文件即可
bundle.write({
// 转化格式 cjs 代表 commonJs, 还支持 iife, amd, umd, es6 ....
format: 'cjs',
banner: 'si_log.js v0.1.1', //文件顶部的广告
dest: 'dist/si_log_common.js'
});
});

package.json 中加上执行脚本

1
2
3
4
5
6
7
{
// ...
"scripts": {
// ...
"build": "node build.js"
},
}

然后,执行命令

1
npm run build

ok 到这里打包就都结束了。

文章目录
  1. 1. 基本用法
  2. 2. export 详细用法
  3. 3. import 详细用法
    1. 3.1. 通过 as 命令修改导入的变量名
    2. 3.2. 加载模块的全部
  4. 4. 开始使用 ES6
    1. 4.1. 安装 rollup
    2. 4.2. 编写打包程序
    3. 4.3. 在 package.json 中加上执行脚本
,