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