Babel转码快速入门

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Babel转码快速入门脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
阅读基础:能在node环境下使用npm/yarn

Babel 可以将 ES6 代码转为 ES5 代码,从而可以在不支持 ES6 的环境运行,下面是一个例子:

//转码前
a=>a+1;

//转码后
(function (a) {
  return a + 1;
});

//上面的代码使用了箭头函数,Babel 将其转为普通函数。

Babel 虽然支持浏览器环境,但网页实时将 ES6 代码转为 ES5 代码会对网页性能有影响,所以我们需要使用构建工具在生产环境将 ES6 代码进行提前转码。

配置babel

Babel 只能转换语法(如箭头函数),不支持新的全局变量,比如:IteratorGeneratorSetMapsProxyReflectSymbolPromise等。
如果想让这些方法运行,必须使用 babel-polyfill ,为当前环境提供该方法。

babel、babel-polyfill 安装:

$ yarn add babel-PReset-env --dev
$ yarn add babel-polyfill --dev

安装完成后,我们可以通过.babelrc文件或者package.json文件对 babel 进行配置;配置文件可以根据具体的需求进行配置:英文文档 中文文档

  • 方法一:新建 .babelrc 文件,并添加以下字段:
{
  "presets": [["env",{"useBuiltIns": true}]]
}
{
  // ...
  "babel": {
    "presets": [["env",{"useBuiltIns": true}]]
  }
}

babel-cli 命令行转码

Babel 提供 babel-cli 工具,可用于命令行转码,工具安装:

$ yarn add babel-cli --dev

babel-cli 基本用法:

# 输出转码结果
$ babel index.js

# 单文件转码
# --out-file 或 -o 参数指定输出文件
$ babel index.js --out-file compiled.js
$ babel index.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir build
$ babel src -d build

# -s 参数生成source map文件
$ babel src -d build -s

我们可以在 package.json 文件中增加脚本:

{
  // ...
  "scripts": {
    "build": "babel src -d build"
  },
}

转码的时候,就执行下面的命令。

$ yarn run build

babel-node

babel-cli 工具自带一个 babel-node 命令,提供一个支持 ES6 的 REPL 环境,而且可以直接运行 ES6 代码。

执行 babel-node 就可以进入REPL环境:

$ babel-node
> (x => x * 2)(1)
2

babel-node 命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件 es6.js,然后直接运行。

$ babel-node es6.js
2

我们可以改写 package.json:

{
  // ...
  "scripts": {
    "script-name": "babel-node test.js"
  }
}

用 babel-node 代替 node, test.js 就不需要做任何转码处理了。

脚本宝典总结

以上是脚本宝典为你收集整理的Babel转码快速入门全部内容,希望文章能够帮你解决Babel转码快速入门所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。