使用Babel和ES7建立JavaScript模塊

【編者按】本文主要介紹經過 ES7 與 Babel 創建 JavaScript 模塊。文章系國內 ITOM 管理平臺 OneAPM 工程師編譯呈現，如下爲正文。

去年，新版的JavaScript發佈了，它有不少新的優勢。其中之一就是導入導出模塊的語法被整理爲JavaScript模塊處理的「惟一方法」。好吧，終於等到了。另外一樁好事兒是，它的編排方式使你能夠靜態分析整棵模塊依賴樹。真是至關厲害。

讓咱們來掃一眼這些語法：

import v from "mod";
import * as obj from "mod";
import {x} from "mod";
import {x as v} from "mod";
import "mod";

export var v;
export default function f(){};
export default function(){};
export default 42;
export {x};
export {x as v};
export {x} from "mod";
export {x as v} from "mod";
export * from "mod";

因此，基本上你能夠導入一個模塊（「default」）的主要值，或者導入從顯式導出（explicit exports）而來的一個特定屬性，或者這兩者的組合，或者是任何東西。相對應的，你也能夠爲默認模塊導出一個值，或者帶有多個屬性的對象。你也能夠逐個導出這些屬性。最佳風格仍是請參考風格指南吧;)

ES7中還加入了一些對這類語法的小補充。

export * as ns from "mod";
export v from "mod";

沒啥特別的，但咱們何時能使用它們呢？擇日不如撞日吧。就像對待不少ES6的語法特性，若是你目前不打算支持它們，能夠用一種叫Babel的工具把它們轉譯回ES5。一旦你準備支持它們了，就可讓Babel中止轉譯。

讓咱們來看一眼具體如何操做。咱們將在Node.js與NPM中實現它。試試看執行這個文件；

src/letter_keys.js

// you would have a constant for each key
// (I would normally uppercase all constants)
const a = 119;
const d = 100;
const s = 115;
const w = 119;

// you would export all keys here
// note: you can't say `w: 119` here. It just isn't valid.
// This destructures to `w: w, a: a, ...`
export {
  w,
  a,
  d,
  s,
}

src/arrow_keys.js

const UP = 38;
const RIGHT = 39;
const DOWN = 40;
const LEFT = 37;

export {
  UP,
  RIGHT,
  DOWN,
  LEFT,
}

src/move.js

export {a, w, s, d} from './letter_keys';
export * as ARROWS from './arrow_keys';

咱們的設想是，index.js 主文件用於內部模塊內容的導出，它假設這些鍵是從其它文件中導出的。這個例子有點費解，可是這並沒有大礙。

src/index.js

import * as keys from './move';
console.log(keys);

這能夠做爲依賴這個模塊的某個項目的一部分。它應當打印awsd鍵以及箭頭對象。讓咱們先從npm開始吧。建立repo dir並初始化：

~$ mkdir foo
~$ cd foo
~/foo$ mkdir src
# put src files above in ~/foo/src
~/foo$ npm init -yes
~/foo$ npm install babel-cli babel-preset-es2015 babel-preset-stage-1 -D

這得花點時間。你可能已經猜到了，babel-cli支持從命令行運行Babel (6)，而且，babel-preset-stage-1包提供了相關的ES7模塊轉譯工具（在撰寫本文之時）。-yes標記會讓npm建立一個默認的package.json，而不會詢問用戶。-D標記是--save-dev的縮寫，它會在package.json中把包添加到devDependency條目下。如今，把預設參數添加入到默認的babel配置文件中：

.babelrc

{
  "presets": ["es2015", "stage-1"]
}

若是這能順利運行，那就太好了，擁抱將來吧！可是，在筆者寫本文時，這些示例在ES6中都沒法運行，更不用說Node.js了。通過這些轉譯步驟，無論怎樣，它們能夠被執行了。

如今還應該有一個幾乎爲空的package.json文件，它包含了咱們添加的那三個dev 依賴。讓咱們給這個package.json 文件加一段腳本，來實現轉譯：

...
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "translate": "node_modules/babel-cli/bin/babel-node.js src/index.js"
  },
  ...

（僅在「test」那行以後添加「translate」行及逗號）。

這段轉譯腳本是一個編譯步驟。在文章的結尾處，你能夠找到本文（正式版本）使用的最終版package.json文件。如今，只剩下調用npm指令來運行腳本，以實現轉譯，並運行咱們的代碼了。

~/foo$ npm run translate --silent

{ A: [Getter],
  W: [Getter],
  S: [Getter],
  D: [Getter],
  ARROWS: { UP: 38, RIGHT: 39, DOWN: 40, LEFT: 37 } }

加油！如今，做爲額外獎勵，咱們可使用Jscrambler來「混淆」一下代碼。咱們能夠傳遞Babel轉譯後的代碼，因此幹嗎不這麼作呢？

咱們（最終的）package.json文件是這樣的：

package.json

{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "translate": "node_modules/babel-cli/bin/babel-node.js src/index.js"
  },
  "keywords": [],
  "author": "Your Name <some@mail.local> (http://localhost/)",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "6.6.5",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-stage-1": "6.5.0",
    "jscrambler": "0.7.5"
  }
}

像往常同樣完成配置（若是使用的是Node.js，則須要一個專業版帳號）。如下是筆者所用的文件（想深刻了解這個文件是如何創建的，能夠此爲例，點此得到更多關於NPM的文檔）：

.jscramblerrc

{
  "keys": {
    "accessKey": "See https://jscrambler.com/en/account/api_access",
    "secretKey": "See https://jscrambler.com/en/account/api_access"
  },
  "params": {
    "constant_folding": "%DEFAULT%",
    "dead_code": "%DEFAULT%",
    "dead_code_elimination": "%DEFAULT%",
    "dictionary_compression": "%DEFAULT%",
    "dot_notation_elimination": "%DEFAULT%",
    "function_outlining": "%DEFAULT%",
    "function-reorder": "%DEFAULT%",
    "literal_duplicates": "%DEFAULT%",
    "literal_hooking": "2;8",
    "member_enumeration": "%DEFAULT%",
    "mode": "nodejs",
    "rename_local": "%DEFAULT%",
    "string_splitting":"0.3",
    "whitespace": "%DEFAULT%"
  }
}

咱們用一段腳原本彙總一下。這段腳本將會用Babel翻譯源文件，輸出到/build文件夾，接着用Jscrambler混淆代碼，再將結果放入/dist文件夾。/dist裏的內容能夠被正常運行，而沒必要用到ES7的任何特性。

run.sh

#!/bin/sh

echo "Babelifying src/*.js"
node_modules/babel-cli/bin/babel.js -d build src/*.js
echo "Scrambling build/*.js"
node_modules/jscrambler/bin/jscrambler -o dist build/src/**
echo "Clean up artifacts"
mv dist/build/src/* dist/
rmdir dist/build/src
rmdir dist/build
echo "Done! See dist/scrambled.js"
echo "Running:"
node dist/index.js

使之準備就緒：

chmod +x run.sh

接着，運行：

~/foo$ ./run.sh 
Babelifying src/*.js
src/arrow_keys.js -> build/src/arrow_keys.js
src/index.js -> build/src/index.js
src/letter_keys.js -> build/src/letter_keys.js
src/move.js -> build/src/move.js
Scrambling build/*.js
Clean up artifacts
Done! See dist/ for your scrambled files
Running:
{ a: [Getter],
  w: [Getter],
  s: [Getter],
  d: [Getter],
  ARROWS: { UP: 38, RIGHT: 39, DOWN: 40, LEFT: 37 } }

你能夠去/dist文件夾查看結果。你會看到，結果和原文件相去甚遠，這是由於咱們經過Jscrambler來保護它，可是結果仍是能夠運行的。

教程到此結束，祝ES7用得開心！

OneAPM 助您輕鬆鎖定 Node.js 應用性能瓶頸，經過強大的 Trace 記錄逐層分析，直至鎖定行級問題代碼。以用戶角度展現系統響應速度，以地域和瀏覽器維度統計用戶使用狀況。想閱讀更多技術文章，請訪問 OneAPM 官方博客。

本文轉自 OneAPM 官方博客

原文地址：https://blog.jscrambler.com/creating-modules-javascript-es7-babel/