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

一般的使用方法如下：

#安装命令行工具到全局
$ 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');

转载于:https://www.cnblogs.com/waterFowl/p/8990690.html

es6学习---.babelrc文件相关推荐

es6学习笔记(一)
es6 chrome兼容其他浏览器不太兼容,需要es6=>es5 babel 安装babel npm init -y 初始化项目 -y代表全部默认同意不用一次次按回车全 ...
ES6学习（一）— Babel转码器的使用和配置
ES6学习(一)- Babel转码器的使用和配置 Babel转码器 Babel是一个广泛使用的ES6转码器,可以将ES6代码转化为ES5代码从而在老版本的浏览器进行. 这意味着,你可以使用ES6的方式 ...
javascript的ES6学习总结(第三部分)
1.ES6中的面向对象的类 1.1.定义类在ES5中,我们写一个类,通常是这么写的 function Person(name,age){this.name = name;this.age = age ...
es6学习笔记-module_v1.0_byKL
es6 学习-module_v1.0 ES6模块不是对象,而是通过export命令显式指定输出的代码,输入时也采用静态命令的形式. ES6的模块自动采用严格模式 export命令用于规定模块的对外接口 ...
es6学习笔记-字符串的扩展_v1.0_byKL
es6学习笔记-字符串的扩展_v1.0 字符的Unicode表示法 JavaScript 允许使用uxxxx的形式表示一个字符,但在 ES6 之前,单个码点仅支持u0000到uFFFF,超出该范围的必 ...
ES6学习——一文搞懂ES6
ES6学习--一文搞懂ES6 es6介绍 ES全称EcmaScript,是脚本语言的规范,而平时经常编写的EcmaScript的一种实现,所以ES新特性其实就是指JavaScript的新特性. 为什么 ...
.babelrc 文件
文件干啥用的 babel是降es6转义成浏览器能理解的es5语法. 如果项目中用了babel 转移,需要定义babel需要的插件和预设转码. babel 一般可以配合 webpack . browse ...
vue-cli中的.babelrc文件介绍
转载自:https://www.jb51.net/article/135232.htm 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏 ...
# es6 学习笔记
es6 学习笔记 let变量 let和var用法级别一样 let不能重复声明,但是var可以 var varIns = "A"; var varIns = "B" ...

es6学习---.babelrc文件

es6学习---.babelrc文件相关推荐

最新文章

热门文章