New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

煦涵说JS(三):Babel #6

Open
zuojj opened this Issue Jun 7, 2017 · 0 comments

Comments

Projects
None yet
1 participant
@zuojj
Owner

zuojj commented Jun 7, 2017

Babel,下一代javascript编译器,当前版本 v2.4.0 ,它可以处理ES6的所有新语法,并内置了React JSX扩展及Flow类型注解支持,如果对Flow不是很了解可以查看FED实验室微信公众号文章煦涵说Flow

Babel与JavaScript技术委员会(TC39)始终保持着高度一致,能够在ECMAScript新特性标准化之前为开发者提供现实可用的转码编译实现,以在ECMAScript规范最后定稿前获得来自世界各地开发者更多的反馈,从而间接推动了javascript的发展以及开发者在项目中尝试使用新技术。因此建议大家开始使用 ��Babel。

Babel 配置文件 .babelrc

学习和使用Babel的第一步,配置 .babelrc 文件,该文件存放到项目根目录下,用来设置 Babel 的转码规则和插件。基本格式如下:

{
  "presets": [],
  "plugins": []
}

presets的规则集如下:

# replaces es2015, es2016, es2017, latest
$ yarn add babel-preset-env --dev

# es2015
$ yarn add babel-preset-es2015 --dev

# es2016
$ yarn add babel-preset-es2016 --dev

# es2017 
$ yarn add babel-preset-es2017 --dev

# react
$ yarn add babel-preset-react --dev

# flow
$ yarn add babel-preset-flow --dev

# The TC39 categorizes proposals into the following stages:
# 
# Stage 0 - Strawman: just an idea, possible Babel plugin.
# Stage 1 - Proposal: this is worth working on.
# Stage 2 - Draft: initial spec.
# Stage 3 - Candidate: complete spec and initial browser implementations.
# Stage 4 - Finished: will be added to the next yearly release.
# For more information, be sure to check out the current TC39 proposals and its process document.
# 
# The TC39 stage process is also explained in detail across a few posts by Yehuda Katz (@wycatz) over at thefeedbackloop.xyz: # Stage 0 and 1, Stage 2, Stage 3, and Stage 4 coming soon.

$ yarn add babel-preset-stage-x --dev

plugins插件集合很多。

新建一个配置文件 .babelrc,并增加如下代码,以供我们下面调试使用:

# 新建配置文件.babelrc,并添加如下内容
# {
#   "presets": ["es2015"],
#   "plugins": []
# }
$ touch .babelrc
# 安装 babel-preset-es2015
$ yarn add babel-preset-es2015 --dev

安装和使用 Babel

ps: 本文将使用Yarn来安装依赖相关npm包,如果不了解Yarn的欢迎阅读公众号专栏煦涵说Yarn

命令行方式运行 babel-cli

babel-cli 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。

全局安装

# 全局安装
$ yarn global add babel-cli

新建一个source.js文件,内容如下:

var arr = [1, 2, 3, 4];

arr = arr.map((item, index) => {
    return item * index;
});

console.log(arr);
# 输出结果到控制台
$ babel source.js

# 输出结果到文件
$ babel source.js --out-file dist.js
or 
$ babel source.js -o dist.js

# 输出结果到目录
$ babel /src --out-dir /dist
or 
$ babel /src -d /dist

项目内安装(局部安装)

# 初始化一个项目package.json
$ mkdir first-babel-proj
$ cd first-babel-proj
$ yarn init 
$ yarn add babel-cli --dev

修改package.json,添加如下文本

{
  "name": "babel-proj",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.24.1"
  },
+  "scripts": {
+   "build": "babel src -d dist"
+  }
}

运行

$ yarn run build

require方式运行 babel-register

ps: 这种方法并不适合正式产品环境使用。 在部署到生成环境之前预先编译会更好。 不过用在构建脚本或是其他本地运行的脚本中是非常合适的。

$ yarn add babel-register --dev

新建compile.js文件

require('babel-register');
require('./src/source.js');

运行

node compile.js

运行结果

$ [0, 2, 6, 12]

编程方式运行 babel-core

$ yarn add babel-core --dev

字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译。

babel.transform("code();", options);
// => { code, map, ast }

如果是文件的话,可以使用异步 api:

babel.transformFile("filename.js", options, function(err, result) {
  result; // => { code, map, ast }
});

或者是同步 api:

babel.transformFileSync("filename.js", options);
// => { code, map, ast }

要是已经有一个 Babel AST(抽象语法树)了就可以直接从 AST 进行转换。

babel.transformFromAst(ast, code, options);
// => { code, map, ast }

更多选项 options.

Babel 与 Webpack

使用 babel-loader 插件

$ yarn add bable-loader --dev

webpack.config.js 配置文件增加如下规则:

{
    test: /\.js$/,
    loader: 'babel-loader'
}

Babel 低版本浏览器兼容

可参考:

感谢您的阅读

--eof--

作者[煦涵]
2017年06月03日

下面是「FED实验室」的微信公众号二维码,欢迎长按、扫描关注:
关注FED实验室

@zuojj zuojj changed the title from 煦涵说Babel to 煦涵说JS(三):Babel Jul 15, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment