babel使用方法总结

前端之家收集整理的这篇文章主要介绍了babel使用方法总结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.在命令行中使用 Babel

Babel 官方推荐将 Babel 安装在本地,因为 Babel 的不同版本以及不同转码规则会起到不同的效果,全局安装会带来不必要的麻烦。在命令提示符中转到自己的项目目录下:

npm install --save-dev babel-cli

如果你之前出于某些原因执行了全局安装,可以通过下面的代码卸载全局范围的 Babel。放心,这并不会影响到项目路径下的本地安装。

npm uninstall --global babel-cli

光有一个 babel-cli 什么也做不了,我们还要为 Babel 安装语法插件。官方提供了几套预设的插件集合,分别适用于 ES2015、React 和 ES7 的一些实验性特性。只是为了学习 ES6 的语法的话,选 ES2015 就好了。

npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

在项目根目录下创建一个.babelrc文件,注意这是个配置文件,以点号开头,没有后缀。Windows 系统是不允许直接创建这样格式的文件的,需要借助代码编辑器来新建文件。创建好后写入以下内容来启用预设:

{    //需要用到的套件
    "presets": ["es2015",'react'],//需要用到的插件
    "plugins": []
}

至此,我们就完成了 babel-cli 的安装,可以开始使用了。

2.Mac 和 Linux 的胜利

对于 Mac 和 Linux 用户,直接打开 Terminal 并切换到项目文件所在位置,就可以开始用了。下面的命令会将转码结果输出到 Terminal 的标准输出中:

babel es6.js

当然更多的时候我们是希望把结果放入文件中的:

babel es6.js -o es6-babeled.js

还有更牛的,Babel 支持实时转码,执行下面的命令后,任何对 ES6 代码修改,保存之后都会自动转码,无需人工再干预。(完成后用 Ctrl+C/Command+C 结束)

babel es6.js --watch -o es6-babeled.js

Babel 还能批量处理整个路径下的 JS 文件,下面的代码把 src 目录下的文件批量转码并放到 lib 目录下:

babel src -d lib

还可以从 Terminal 的标准输入中读取文件进行转码:

babel -o es6-babeled.js < es6.js

官方还有一个更推荐的方法,在package.json文件中的scripts属性添加一项"build": "babel src -d build",之后只要在项目根目录执行npm run build,Babel 就会自动将src目录下的 js 文件自动转码并放入build目录下。

3.Windows 的悲哀

Windows 用户很快就会会发现babel命令根本用不了,系统不识别这个命令。检查一下环境变量你就会发现,根本没有相关的路径在里面。如果你执行过全局安装的话,会在 Node.js 的安装目录下的 node_global 目录下看到一个 babel.cmd 文件,把这个路径添加到环境变量中,就能用了。如果细看一下文件内容,你就会发现奥秘所在。

@IF EXIST "%~dp0\node.exe" (
    "%~dp0\node.exe"  "%~dp0\node_modules\babel-cli\bin\babel.js" %*
) ELSE (
    @SETLOCAL
    @SET PATHEXT=%PATHEXT:;.JS;=;%
    node  "%~dp0\node_modules\babel-cli\bin\babel.js" %*
)

这个文件实际上是先检查 node.exe 是否存在,若存在,则执行node .node_modulesbabel-clibinbabel.js并接受后续的参数。这么一看就明白了,说白了 babel 的命令行工具本质是个 js 文件,需要用node来运行。照这个思路,我们只需要在项目的根目录下自行添加一个babel.cmd文件,并写入以下内容,就能使用项目里的babel命令了。

node .\node_modules\babel-cli\bin\babel.js %*

当然,用这个方法的前提是你需要配置好 Node.js 的环境,并且用 npm 安装好了 babel-cli,否则会报错说文件不存在。
之后的用法就和 Mac 和 Linux 下的一样了,看前面就好,不赘述了。

4.babel其他常用

babel-node
babel-node 是随 babel-cli 一起安装的另一款命令行工具,是一个模拟 Node.js 环境的 REPL(Read-Evel-Print Loop,一种循环执行“读取-执行-输出”的程序)。执行babel-node会进入一个类似 Node.js 的环境,在这里你可以直接运行 ES6 的代码。你也可以用形如babel-node es6.js的命令来直接运行用 ES6 编写的文件,babel-node 会在运行代码之前先将其编译成 ES5 的等效代码,然后执行
甚至可以改写package.json文件,用 babel-node 替代 node 命令来直接运行。

{

"scripts": {
    "script.js": "babel-node script.js"    // 需替换成实际文件名
}

}

此时执行npm run script.js就等同于执行babel-node script.js

babel-core
这是 Babel 的核心 API 所在,在项目中加载该模块var babel = require("babel-core");,然后就可以通过babel.transform(code,options)方法来执行转码,code是待转码的 ES6 代码字符串,options提供了一些转码说明,例如指定语法规则、启用一些插件、设定编码等,具体用法可以参考这里。

babel-polyfill
Babel 默认只转码 ES6 的新语法(Syntax),而不转换新的API,比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign、Array.from)都不会转码。如果想让这写方法运行,必须require("babel-polyfill")。

babel-doctor
看名字就知道,这个工具大概是排错用的。没错,如果在命令行中执行babel命令有问题的,可以用babel-doctor命令检查一下环境配置是否正确。主要检查以下几项内容
o 项目根目录下是否存在.babelrc文件
o 是否有重复的Babel版本,例如同时安装了 Babel 5 和 Babel 6
o 所有已安装的 Babel 工具是否升级到了最新版
o npm 的版本是否大于等于 3.3.0
在 Node.js 中使用 Babel
在 Node.js 环境中,可以直接在 js 文件调用 Babel 的转码功能
babel-register
该模块给require()加上一个钩子,加载它之后,每当再 require 其他 js、jsx、es、es6 类型的文件,就会先用 Babel 进行转码。需要注意的是,使用该模块的文件本身并不会被转码,需要从外部执行转码。另外由于是实时转码,从效率上考虑不适用与生产环境,仅供学习研究使用。

5.在浏览器中使用 Babel

在命令行中使用 Babel 虽然在功能性上没得挑,但操作起来多少有点麻烦。Babel 提供了一种可以在浏览器中使用的方法,只需两步就能一劳永逸。这个方法唯一的缺点就是实时转码需要时间,性能上不及预先转换的方案,因此生产环境中不推荐使用,仅供学习研究使用。
首先我们需要下载browser.js,注意,这是 Babel 5 的版本,Babel 6 开始不再直接提供该文件,需要自行构建。
除了从上面的链接下载,你也可以用 npm 下载:

npm install babel-core@5

下载后在node_modules/babel-core子目录中就能找到browser.js文件
使用方法如下:

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel" src="your_own_es6_file.js"></script>

有两点需要注意

  1. browser.js 文件必须放在你自己的 js 文件之前

  2. 你自己的文件的类型要写成type="text/babel"

6.在线试用 Babel

有时候我们并不需要在项目中操作什么,纯粹就想看看 Babel 到底做了什么。为此 Babel 官方提供了一套在线的REPL (Read-Eval-Print-Loop),可以方便的试用 Babel。

7.配合使用

1.Webpack用法

(1). 安装babel-loader

npm install babel-loader babel-core --save -dev

(2).

配置loader
     module: {
       loaders: [{
           test: /\.js$/,exclude: /node_modules/,loader: "babel-loader"
       }]

}

(3).配置.babelrc文件

{
       "presets": [
           // 需要用到的套件
       ],"plugins": [
           // 需要用到的插件
       ]
 }

注意:要配置好.babelrc文件

2.Gulp用法

(1).安装gulp-babel

npm install gulp-babel --save -dev

2.定义task

(1)

var gulp = require("gulp");
     var babel = require("gulp-babel");
    
     gulp.task("default",function () {
       return gulp.src("src/app.js")
         .pipe(babel())
         .pipe(gulp.dest("dist"));
 });

(2)配置.babelrc文件

{
       "presets": [
           // 需要用到的套件
       ],"plugins": [
       // 需要用到的插件
       ]
 }

(3)Babel套件与插件

3-1:适用于ES6的套件: babel-preset-es2015

npm install babel-preset-es2015 --save -dev

.babelrc

{
    "presets": ["es2015"]
}

babel-preset-react

3-2:适用于React的套件:babel-preset-react

npm install --save-dev babel-preset-react

.babelrc

{
    "presets": ["react"]
}

3-3:object-assign
适用于object.assign()
举例

var obj = { a: 1 };
var copy = Object.assign({},obj);
console.log(copy); // { a: 1 }

安装

npm install babel-plugin-transform-object-assign

.babelrc

{
  "plugins": ["transform-object-assign"]
}

3-4:object-rest-spread
适用于展开运算符
举例

var arr1 = [0,1,2];
    var arr2 = [3,4,5];
    arr1.push(...arr2);

安装

npm install babel-plugin-transform-object-rest-spread

.babelrc

{
  "plugins": ["transform-object-rest-spread"]
}
原文链接:https://www.f2er.com/react/304757.html

猜你在找的React相关文章