资讯专栏INFORMATION COLUMN

使用Babel和ES7创建JavaScript模块

jindong / 3151人阅读

摘要:编者按本文主要介绍通过与建立模块。其中之一就是导入导出模块的语法被整理为模块处理的唯一方法。这可以作为依赖这个模块的某个项目的一部分。创建并初始化这得花点时间。以用户角度展示系统响应速度,以地域和浏览器维度统计用户使用情况。

【编者按】本文主要介绍通过 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/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/79409.html

相关文章

  • 「大概可能也许是」目前最好的 JavaScript 异步方案 async/await

    摘要:使用时也要注意范围和层级。服务端配置服务端使用,最简单的方式是通过。云引擎是推出的服务器端运行环境,支持和环境,功能强大而且目前免费,结合,使原本复杂的开发工作变得简单高效。目前也支持和海外节点,轻松满足你的业务需求。 构建一个应用程序总是会面对异步调用,不论是在 Web 前端界面,还是 Node.js 服务端都是如此,JavaScript 里面处理异步调用一直是非常恶心的一件事情。以...

    Scorpion 评论0 收藏0
  • babel7 重新理解

    摘要:主要功能点语法转换垫片兼容处理,通过方式在目标环境中添加缺失的特性源码转换其他使用理念主要通过插件的形式达到转换代码的目的。就是解决这个问题的。 测试环境 node 10.14.1Babel 7.4.3 Babel 是什么? Babel 是一个工具链,主要用于将 ECMAScript2015+版本的代码转换为向后兼容的 Javascript 代码,以便能够运行在当前和旧版本的浏览器或其...

    avwu 评论0 收藏0
  • 《从零构建前后分离的web项目》:前端了解过关了吗?

    摘要:前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解,并且最好带有一定的技术前瞻性,好的技术架构可能日后会方便的扩展,减少重构的次数,即使重构也不需要大动干戈,我通常选型技术栈会参考以下三点一提出自身业务的需求是 # 前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/146000001626972...

    lbool 评论0 收藏0
  • 《从零构建前后分离的web项目》:前端了解过关了吗?

    摘要:前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解,并且最好带有一定的技术前瞻性,好的技术架构可能日后会方便的扩展,减少重构的次数,即使重构也不需要大动干戈,我通常选型技术栈会参考以下三点一提出自身业务的需求是 # 前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/146000001626972...

    cgspine 评论0 收藏0
  • 《从零构建前后分离的web项目》:前端了解过关了吗?前端基础架构硬核介绍

    摘要:前端准备前端了解过关了吗前端基础架构和硬核介绍技术栈的选择首先我们构建前端架构需要对前端生态圈有一切了解,并且最好带有一定的技术前瞻性,好的技术架构可能日后会方便的扩展,减少重构的次数,即使重构也不需要大动干戈,我通常选型技术栈会参考以下三 # 前端准备 :前端了解过关了吗?前端基础架构和硬核介绍 showImg(https://segmentfault.com/img/remote/...

    SwordFly 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<