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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。