ES6的模块化

时间 2019-11-19

原文原文链接

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

基本用法

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

一个模块就是一个独立的文件。该文件内部的全部变量，外部没法获取。若是你但愿外部可以读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个JS文件，里面使用export命令输出变量。node

// math.js

export const add = function (a, b) {
 return a + b
}

export const subtract = function (a, b) {
 return a - b
}

使用export命令定义了模块的对外接口之后，其余JS文件就能够经过import命令加载这个模块（文件）。es6

// main.js
import { add, subtract } from './test.js'

add(1, 2)
substract(3, 2)

export 详细用法

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

export const obj = {
 test1: ''
}

export const test = ''

exrpot class Test {
 constuctor() {
 }
}

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

let a = 1
let b = 2
let c = 3
export {
 a,
 b,
 c
}

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

经过 as 改变输出名称服务器

// 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 中须要指定加载的变量名或函数名，不然没法加载。可是，用户确定但愿快速上手，未必愿意阅读文档，去了解模块有哪些属性和方法。babel

export default 指定默认输出, import 无需知道变量名就能够直接使用模块化

// 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 为加载模块的命令，基础使用方式和以前同样

// 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 定义的导入，还能够经过 * 号加载模块的所有.

// math.js

export const add = function (a, b) {
 return a + b
}

export const subtract = function (a, b) {
 return a - b
}

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 打包依赖的包

{
 // ...
 "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"
 }
}

编写打包程序

下面是个人打包程序

// 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` 中加上执行脚本

{
 // ...
 "scripts": {
 // ...
 "build": "node build.js"
 },
}

而后，执行命令

1	npm run build

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