运用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 (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/