es6学习---.babelrc文件

babel是用来进行转码的，在不支持es6的环境下，需要将es6的语法转码成es5的语法格式，就用到了babel。

.babelrc 文件的配置

在项目的根目录下创建 .babelrc 文件

文件包括两部分：

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

　　"presets"用来设定转码的规则；plugins是需要安装的插件

规则：

#安装最新的转码规则
$ npm install babel-preset-latest --save-dev

#安装react的转码规则
$ npm install babel-preset-react --save-dev

#不同阶段的语法提案的转码规则（4选1）
$ 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 文件中

　　注意：该文件的编辑方式按照json文件的编辑习惯编辑。其中，不能使用 ' ' 代替 " " 。

{
  "presets":[
    "latest",
    "react",
    "stage-2"
  ],
  "plugins":[]
}

命令行转码工具：babel-cli

一般的使用方法如下：

扫描二维码关注公众号，回复： 109881 查看本文章

#安装命令行工具到全局
$ npm install -g babel-cli

#安装命令行工具到项目中
$ npm install --save-dev babel-cli

改写package.json文件，将启动 babel-cli 的命令进行封装

#封装命令，名称随意
"scripts": {
    ...
    "babelCli":"babel src -d lib"
  },

#安装好之后自动添加
"devDependencies": {

　　...
　　"babel-cli": "^6.26.0",
　}

执行如下：

$ npm run babelCli

有关 babel-cli 的具体用法见阮老师的 ECMAScript6简介

babel-node：提供一个REPL环境

REPL 是交互式解析器可以看这里或自行百度 node的REPL。

简单的理解，就是提供可以在命令行进行一些运算。

babel-register：对文件自动转码

babel-register会对require引入的后缀为 ‘.js’, '.jsx' , '.es' , '.es6' 的文件进行转码。不需要再使用转码命令进行转码。

安装：

$ npm install --save-dev babel-register

引用：

require("babel-register");
require("./App.js");

注意：1.必须先引入babel-register 再引入文件。 2.引入的方式只能通过 require 的方式引入。3.只在生产环境生效

babel-polyfill：提供转换新API的插件

有一些新的API，babel不会进行转化 --> Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码.安装了babel-polyfill之后就可以对这些新API进行转化。

#安装：
$ npm install --save-dev babel-polyfill

#使用
import('babel-polyfill');
require('babel-polyfill');

es6学习---.babelrc文件

猜你喜欢