煦涵说Babel

lordharrd 发布于2019-08-20 17:00 / 580人阅读

摘要：，下一代编译器，当前版本，它可以处理的所有新语法，并内置了扩展及类型注解支持，如果对不是很了解可以查看实验室微信公众号文章煦涵说。

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 低版本浏览器兼容

可参考:

煦涵说webpack-IE低版本兼容指南，或者FED实验室公众号文章

React - IE低版本兼容

感谢您的阅读

--eof--

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

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

云服务器 idc机房托管煦涵说 Babel babel cdn babel7

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

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

煦涵说Flow

摘要：现在已经在前端比较流行的等框架中得到使用。今天煦涵就和大家一起来学习以及在实际项目中的使用。安装这里我们选择使用，当前你也可以使用如果你对不是很了解，建议你阅读煦涵说。 Flow是Facebook出品的一个JavaScript代码的静态类型检查工具，它做了很多处理，使您的代码更快，更智能，更自信，更好的适应性。现在已经在前端比较流行的React 、Vue 等框架中得到使用。今天煦涵就和...

王伟廷 2019-08-20 16:59 评论0 收藏0
煦涵说Webpack-IE低版本兼容指南

摘要：，是一个前端资源加载打包工具，现在版本已经到，今天的文章不支持介绍的及使用，而是对最近项目开发中使用打包时处理低版本及以下浏览器兼容问题做一次总结。 Webpack，Webpack 是一个前端资源加载/打包工具，现在版本已经 release 到 v2.6.1，今天的文章不支持介绍Webpack的API及使用，而是对最近项目开发中使用Webpack打包时处理IE低版本(IE8及以下)浏览...

tanglijun 2019-08-20 16:55 评论0 收藏0
煦涵说JSON

摘要：对象表示法，是一种数据交换格式，能够在服务器端交换数据，年由提出，目的是取代繁琐笨重的格式。煦涵煦涵煦涵煦涵煦涵参考文档感谢您的阅读作者煦涵年月日下面是实验室的微信公众号二维码，欢迎长按扫描关注 JSON(Javascript Object Notaion, javascript 对象表示法)，是一种数据交换格式，能够在服务器端交换数据， 2001年由Douglas Crockfor...

lowett 2019-08-20 16:52 评论0 收藏0
煦涵说Yarn

摘要：是一个新的包管理器，它由开发者共同开发完成。从包管理器中借鉴，创建了文件，用来记录项目使用每个包的确切版本。感谢您的阅读作者煦涵年月日下面是实验室的微信公众号二维码，欢迎长按扫描关注 Yarn是一个新的Javascript包管理器，它由Facebook, Google, Exponent and Tilde开发者共同开发完成。Yarn 不是 NPM 的fork版本，而是它的重新设计，Y...

pkhope 2019-08-21 15:52 评论0 收藏0
Babel的使用

摘要：使用的时候只需要安装你想要的阶段就可以了然后添加进你的配置文件。为了显出的能耐，我们分别配个用和支持的先来配使用的首先安装然后配置需要注意的是，虽然没有出现在配置里，但仍然需要安装，因为依赖它。 Babel介绍 Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。这一过程叫做源码到源码编译，也被称为转换编译。 15 年 11 月，Babel...

Y3G 2019-08-20 13:51 评论0 收藏0