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不会进行转化 --> IteratorGeneratorSetMapsProxyReflectSymbolPromise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码.安装了babel-polyfill之后就可以对这些新API进行转化。

#安装:
$ npm install --save-dev babel-polyfill #使用
import('babel-polyfill');
require('babel-polyfill');

es6学习---.babelrc文件的更多相关文章

  1. ES6 学习体会

    第一部分: 1.初始化项目 npm init -y 2.安装ES6 环境 .babelrc 文件 babel-cli -g babel-ecmascript2015 babel-cli --save- ...

  2. ES6学习--搭建环境

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...

  3. ES6学习(一)搭建环境

    作为一名后端小开发,业务工作需要将后台系统重构一番,许多同事都已经使用前后分离搭建项目,为了不拖后腿自己在家摸索ES6的新特性,真心不知道什么ES3,ES5,一上来就开始搞ES6,在此留下学习笔记,方 ...

  4. ES6学习之Babel的正确安装姿势

    开始学习ES6,写点东西放上博客^_^ 本文介绍Babel6.x的安装过程~ 首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行 ...

  5. ES6学习之环境配置

    环境配置 一.建立工程目录 新建dist文件夹(用于存放转化的es5文件).新建src文件夹(用于存放es6文件),在该文件夹下建立index.js文件 二.编写index.html 在根目录下新建i ...

  6. .babelrc 文件

    文件干啥用的 babel是降es6转义成浏览器能理解的es5语法. 如果项目中用了babel 转移,需要定义babel需要的插件和预设转码. babel 一般可以配合 webpack . browse ...

  7. javascript的ES6学习总结(第二部分)

    1.数组循环 介绍数组循环之前,先回顾一下ES5数组的循环 (1)数组遍历(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是数组的 ...

  8. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  9. .babelrc文件的一些简单的配置

    首先现在根目录先生存.babelrc文件 这个文件是用来设置转码的规则和插件的 如果想使用es6语法,必须安装插件 npm install babel-preset-es2015 { "pr ...

随机推荐

  1. java框架之Spring(4)-Spring整合Hibernate和Struts2

    准备 导包 Struts2 导入 Struts2 zip 包解压目录下 'apps/struts-blank.war' 中所有 jar 包,如下: asm-3.3.jar asm-commons-3. ...

  2. Navicat 用ssh通道连接时总是报错 (报错信息:SSH:expected key exchange group packet form serve

    转:https://blog.csdn.net/qq_27463323/article/details/76830731 之前下了一个Navicat 11.0 版本 用ssh通道连接时总是报错 (报错 ...

  3. 3.1.1 Spring 简介

    1. 概念 Spring是一个轻量级控制反转(IoC)和面向切面(AOP)的容器框架. IoC : Inversion of Control AOP : Aspect Oriented Program ...

  4. linux系统644、755、777权限详解

    在linux系统中644.755.777三种权限是非常重要的一些权限了,下面我来详细的介绍644.755.777三种权限的使用,希望对各位有帮助. 常用的linux文件权限:444 r--r--r-- ...

  5. 三、UI开发之核心基础——约束(入门)

    先学个新技能:添加图片控件Image View iOS的图片控件是ImageView,ImageView通过提前载入用户指定的图片资源来显示相应的图片. 所以图片控件的关键信息有3个: 1. Imag ...

  6. UML第一次作业

    一. 用例图:用例图(usecase diagram)是UML用于描述软件功能的图形.用例图包括用例.参与者及其关系,用例图也可以包括注释和约束.程序员要画时序图啥的用其他的比较麻烦,用plantum ...

  7. OAuth2认证和授权:AuthorizationCode认证

    前面的OAuth2认证,里面的授权服务器都是用的identityserver4搭建的 ids4没有之前一般都是Owin搭建授权服务器,博客园有很多 ids4出来后,一般都是用ids4来做认证和授权了, ...

  8. 使用 Unity 3D 开发游戏的架构设计难点

    Unity 3D 引擎对于开发者来说,入手非常快,因为它采用的是 C# 作为开发语言,这也大大降低了开发者的门槛.但凡只要懂一门编程语言的人都能使用 Unity 3D 引擎开发,另外 Unity 3D ...

  9. day02 Python列表的增删查改及常用操作

    列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = [‘alex’,12 ...

  10. Select input 两个元素的宽度高度跟设定值不一致的问题

    在做登录框的时候,需要一个select 元素作为账号输入,一个input作为密码输入框.在css 文件中,将这两个元素的position 设置为relative ,并且width 设置为100%.刷新 ...