简介
Babel 能做什么?
Babel 不能做什么?
安装 Babel
babel-cli
与 package.json 集成
babel-node
babel-register
babel-core
与 webpack 集成
配置 Babel
.babelrc
转码规则(preset)
插件(plugins)
在其它工具中配置
在 package.json 中配置
在 webpack.config.js 中配置
执行 Babel 生成的代码
babel-polyfill
babel-runtime
Babel 入门指南
?? 注意:
Babel 可以与很多构建工具(如
Browserify
、Grunt
、Gulp
等)进行集成。由于本教程选择Webpack
,所以只讲解与Webpack
的集成。想了解如何与其它工具集成,请参考:官方文档 - installation
简介
Babel
是一个通用的多用途 JavaScript 编译器。
Babel 能做什么?
Babel 通过语法转换来支持最新版本的 JavaScript (ES6),而不用等待浏览器的支持。
Babel 可以转换 React 的 JSX 语法和删除类型注释。
Babel 是由插件构建的。因此,你可以根据自己的需要订制。
支持 source map ,所以您可以轻松调试您编译的代码。
Babel 不能做什么?
Babel 只转换语法(如箭头函数),不支持新的全局变量。但是,您可以使用
babel-polyfill
来辅助支持。
安装 Babel
babel-cli
babel-cli
是 Babel 的命令行工具。
安装
# 本地安装$ npm install --save-dev babel-cli# 全局安装$ npm install --global babel-cli
用法
# 将编译后的结果直接输出至终端$ babel example.js# 将结果写入到指定的文件$ babel example.js --out-file compiled.js $ babel example.js -o compiled.js# 将一个目录整个编译成一个新的目录$ babel src --out-dir lib $ babel src -d lib
与 package.json
集成
?? 提示:
建议使用本地安装方式安装
babel-cli
。原因在与:
在同一台机器上的不同项目或许会依赖不同版本的 Babel 并允许你有选择的更新。
这意味着你对工作环境没有隐式依赖,这让你的项目有很好的可移植性并且易于安装。
本地安装 babel-cli
,直接使用 babel
命令将无法识别。你可以选在在 package.json
文件的 scripts
属性中定义命令。npm
会自动找到本地安装的库。
{ "scripts": { "build": "babel src -d lib" }, "devDependencies": { "babel-cli": "^6.0.0" },}
现在可以在终端里执行命令:
$ npm run build
?? 示例DEMO01: (SOURCE)
说明:
示例的上一级目录
codes/chapter04/babel
已经配好了配置文件。在
codes/chapter04/babel
路径下执行命令:$ npm install $ npm run demo01会生成一个
dist/demo01
目录,其中就是被转码后的文件。
babel-node
babel-cli
工具自带一个 babel-node
命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。
它不用单独安装,而是随 babel-cli
一起安装。然后,执行 babel-node
就进入 PEPL 环境。
然后用 babel-node
来替代 node
运行所有的代码:
$ babel-node> (x => x * 2)(1)2
babel-node
命令可以直接运行ES6脚本:
$ babel-node example.js
如果用 npm 的话只需要这样做:
{ "scripts": { "script-name": "babel-node script.js" }, "devDependencies": { "babel-cli": "^6.0.0" },}
然后,执行命令:
$ npm run babel-node
babel-register
下一个常用的运行 Babel 的方法是通过 babel-register
。这种方法只需要引入文件就可以运行 Babel,或许能更好地融入你的项目设置。
?? 注意:
这种方法并不适合正式产品环境使用。 直接部署用此方式编译的代码不是好的做法。 在部署之前预先编译会更好。
不过用在构建脚本或是其他本地运行的脚本中是非常合适的。
安装
$ npm install --save-dev babel-register
使用
创建
index.js
文件:
console.log("Hello world!");
这是,使用 node index.js
来运行它是不会使用 Babel 来编译的。所以我们需要设置 babel-register
。.
创建
register.js
文件:
require("babel-register");require("./index.js");
这样做可以把 Babel 注册到 Node 的模块系统中并开始编译其中 require
的所有文件。
执行命令
现在我们可以使用 register.js
来代替 node index.js
来运行了。
$ node register.js
需要注意的是:你不能在你要编译的文件内同时注册 Babel,因为 node 会在 Babel 编译它之前就将它执行了。
?? 示例DEMO02: (SOURCE)
说明:
示例的上一级目录
codes/chapter04/babel
已经配好了配置文件。在
codes/chapter04/babel
路径下执行命令:$ npm install $ npm run demo02控制台会打印如下内容:
> node demo02/register.js Hello world!
babel-core
如果你需要以编程的方式来使用 Babel,可以使用 babel-core
这个包。
安装
$ npm install babel-core
使用
在代码中引入 babel-core
var babel = require("babel-core");
编译 API
# 如果是字符串形式的 JavaScript 代码,可以使用 transform 编译babel.transform("code();", options);// => { code, map, ast }# 如果是文件的话,异步编译使用 transformFilebabel.transformFile("filename.js", options, function(err, result) { result; // => { code, map, ast }});# 如果是文件的话,同步编译使用 transformFileSyncbabel.transformFileSync("filename.js", options);// => { code, map, ast }# 要是已经有一个 Babel AST(抽象语法树)了就可以直接从 AST 进行转换babel.transformFromAst(ast, code, options);// => { code, map, ast }
与 webpack 集成
?? 提示:
本教程由于选择的编译工具为
webpack
,所以这里只介绍与webpack
的集成。实际上,Babel 还可以与其它许多工具集成,更多内容参考:官方文档 - setup
安装
$ npm install --save-dev babel-loader babel-core
配置
在 Chapter03 的 Webpack 资源管理 一文中,介绍过使用 babel-loader 来处理 React 语法。
在 webpack.config.js 配置如下:
// 关于模块配置module: { // 模块规则(配置 loader、解析器等选项) rules: [ { // 语义解释器,将 js/jsx 文件中的 es2015/react 语法自动转为浏览器可识别的 Javascript 语法 test: /\.jsx?$/, include: path.resolve(__dirname, "app"), loader: "babel-loader", }, ]},
?? 示例
chapter03-jigsaw: (SOURCE)
chapter04-jigsaw: (SOURCE)
说明:
chapter04-jigsaw
和chapter03-jigsaw
相比,多了一个.babelrc
文件。它其实是将chapter03-jigsaw
中的webpack.common.js
文件里的 babel-loader 的配置移入了.babelrc
文件。这两个代码目录的执行结果完全相同。
执行方法:
$ npm install# 开发环境 - 本地启动一个访问地址为 localhost:9000 的 web app$ npm run dev# 开发环境 - 生成一个 dist 目录,其中打包了所有资源文件,在浏览器打开 index.html,可以看到和开发环境差不多的展示。$ npm run prod# 清除输出目录 dist$ npm run clean
配置 Babel
?? 提示:
由于
Babel
是一个非常灵活的通用编译器,因此默认情况下它反而什么都不做。你需要通过配置文件,明确地告诉 Babel 应该要做什么。
.babelrc
.babelrc
文件是 Babel
的默认配置文件。
.babelrc
文件的内容形式就是序列化的 JSON。
该文件用来设置转码规则(presets)和插件(plugins),基本格式如下:
{ "presets": [], "plugins": []}
转码规则(preset)
转码规则可以告诉 Babel 去处理什么语法。
常见的转码规则有:
babel-preset-es2015
这是 ES2015(最新版本的 JavaScript 标准,也叫做 ES6)的转码规则。使用它后,Babel 可以将 ES6 语法转码为普通 JavaScript(即 ES5) 语法。
babel-preset-react
这是 React 的转码规则。使用它后,Babel 可以将 React 语法转码为普通 JavaScript 语法。
babel-preset-stage-x
这是 ES7 不同阶段语法提案的转码规则。使用它后,Babel 可以将 ES7 不同阶段语法转码为普通 JavaScript 语法。
?? 提示:
JavaScript 还有一些提案,正在积极通过 TC39(ECMAScript 标准背后的技术委员会)的流程成为标准的一部分。
这个流程分为 5(0-4)个阶段。 随着提案得到越多的关注就越有可能被标准采纳,于是他们就继续通过各个阶段,最终在阶段 4 被标准正式采纳。以下是4 个不同阶段的(打包的)预设:
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
stage-4 预设是不存在的因为它就是上面的
es2015
预设。以上每种预设都依赖于紧随的后期阶段预设。例如,
babel-preset-stage-1
依赖babel-preset-stage-2
,后者又依赖babel-preset-stage-3
。
安装
# es2015(即ES6)语法转码规则$ npm install --save-dev babel-preset-es2015# react 语法转码规则$ npm install --save-dev babel-preset-react# stage 是指 ES7 不同阶段的语法转码规则,选装一个即可$ npm install --save-dev babel-preset-stage-0 $ npm install --save-dev babel-preset-stage-1 $ npm install --save-dev babel-preset-stage-2 $ npm install --save-dev babel-preset-stage-3
使用
安装完后,需要在配置文件 .babelrc
中引入项目中实际需要的预设转码规则,让 Babel 得以知道规则。
形式如下:
{ "presets": [ "es2015", "react", "stage-0" ], "plugins": []}
插件(plugins)
插件是 Babel 的核心。
Babel 插件大致分为三类:
转码插件
有很多种插件:将ES6 / ES2015转换为ES5,转换为ES3,minification,JSX,flow,实验功能等等。
语法插件
这些只是使转码插件能够解析某些功能(转码插件已经包含语法插件,因此这两个功能你都不需要):babel-plugin-syntax-x
助手
这些主要用于各种插件内部使用:babel-helper-x
。
更多插件请在 npm 搜索(真的好多!)
更详细介绍请参考:官方文档 - 插件
在其它工具中配置
?? 提示:
除了在
.babelrc
文件中定义 Babel 配置。实际上,还可以在其他工具中对其进行配置。
在 package.json
中配置
可以在 package.json
文件的 babel
属性中配置 Babel 规则。
配置方法与 .babelrc
文件完全相同。
形式如下:
"babel": { "presets": [ "es2015" ] "plugins": []},
在 webpack.config.js
中配置
可以在 webpack.config.js
文件配置 babel-loader
时,直接在 options
属性中配置 Babel 规则。
形式如下:
{ test: /\.jsx?$/, include: path.resolve(__dirname, "app"), exclude: /node_modules/, loader: "babel-loader", options: { presets: [ [ "es2015", { "modules": false } ], "react" ], plugins: [ "syntax-dynamic-import", // 动态导入插件 "react-hot-loader/babel" // 开启 React 代码的模块热替换(HMR) ] },}
执行 Babel 生成的代码
即便你已经用 Babel 编译了你的代码,但这还不算完。
babel-polyfill
Babel 几乎可以编译所有新潮的 JavaScript 语法,但对于 APIs 来说却并非如此。
比方说,下列含有箭头函数的需要编译的代码:
function addAll() { return Array.from(arguments).reduce((a, b) => a + b);}
最终会变成这样:
function addAll() { return Array.from(arguments).reduce(function(a, b) { return a + b; });}
然而,它依然无法随处可用。因为并非所有的 JavaScript 环境都支持 Array.from
。
为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁) 的技术。 简单地说,polyfill 即是在当前运行环境中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生 api 的代码。 能让你提前使用还不可用的 APIs,Array.from
就是一个例子。
Babel 提供了 babel-polyfill
来支持 polyfill 。
安装
$ npm install --save babel-polyfill
使用
然后,只需要在文件顶部导入 babel-polyfill
就可以了:
import "babel-polyfill";
babel-runtime
babel-runtime 与 polyfill 类似,不同之处在于它不修改全局范围,并且与 babel-plugin-transform-runtime
(通常在库/插件代码中)一起使用。
为了实现 ECMAScript 规范的细节,Babel 会使用“助手”方法来保持生成代码的整洁。
由于这些助手方法可能会特别长并且会被添加到每一个文件的顶部,因此你可以把它们统一移动到一个单一的“运行时(runtime)”中去。
通过安装 babel-plugin-transform-runtime
和 babel-runtime
来开始。
$ npm install --save-dev babel-plugin-transform-runtime $ npm install --save babel-runtime
然后更新 .babelrc
:
{ "presets": [ "es2015", "react", "stage-0" ], "plugins": [ "transform-runtime", "transform-es2015-classes" ]}
现在,Babel 会把这样的代码:
class Foo { method() {}}
编译成:
import _classCallCheck from "babel-runtime/helpers/classCallCheck";import _createClass from "babel-runtime/helpers/createClass";let Foo = function () { function Foo() { _classCallCheck(this, Foo); } _createClass(Foo, [{ key: "method", value: function method() {} }]); return Foo;}();
这样就不需要把 _classCallCheck
和 _createClass
这两个助手方法放进每一个需要的文件里去了。
作者:静默虚空
出处:http://www.cnblogs.com/jingmoxukong/
欢迎任何形式的转载,但请务必注明出处。
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。
分类: 11_前端技术
标签: babel, webpack, ECMAScript6
3
0
? 上一篇:Webpack 开发工具与模块热替换
posted @ 2017-06-19 08:40 静默虚空 阅读(181) 评论(1) 编辑 收藏
评论列表
支持支持支持
注册用户登录后才能发表评论,请 登录 或 注册,访问网站首页。
【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库
【阿里云】云计算科技红利邀您免费体验!云服务器、云数据库等35+产品,6个月免费使用!
【免费】从零开始学编程,开发者专属实验平台免费实践!
最新IT新闻:
· SpaceX准备再次用回收的火箭发射卫星
· 三星计划推迟至本月推出语音助手Bixby英语版
· 国内手机厂商美了!顺丰将解除手机空运限制
· 苹果推出月亮主题“用iPhone拍摄”新广告
· 徘徊在十字路口上的百度:是英雄迟暮还是老虎打盹?
? 更多新闻...
最新知识库文章:
· 小printf的故事:什么是真正的程序员?
· 程序员的工作、学习与绩效
· 软件开发为什么很难
· 唱吧DevOps的落地,微服务CI/CD的范本技术解读
· 程序员,如何从平庸走向理想?
公告
<2017年6月> | ||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 |
---|---|---|---|---|---|---|
28 | 29 | 30 | 31 | 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 | 27 | 28 | 29 | 30 | 1 |
2 | 3 | 4 | 5 | 6 | 7 | 8 |
搜索
我的标签
随笔分类(152)
技术站点
Java 资料大全
帖子
积分与排名
积分 - 214186
排名 - 909
阅读排行榜
推荐排行榜
Copyright ?2017 静默虚空
www.cnblogs.com/jingmoxukong/p/7028572.html