ES6的模块化

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

基本用法

es6 中新增了两个命令 export 和 import , 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 = '' exrpot class Test { constuctor() { } }

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 到这里打包就都结束了。