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');
es6学习---.babelrc文件的更多相关文章
- ES6 学习体会
第一部分: 1.初始化项目 npm init -y 2.安装ES6 环境 .babelrc 文件 babel-cli -g babel-ecmascript2015 babel-cli --save- ...
- ES6学习--搭建环境
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...
- ES6学习(一)搭建环境
作为一名后端小开发,业务工作需要将后台系统重构一番,许多同事都已经使用前后分离搭建项目,为了不拖后腿自己在家摸索ES6的新特性,真心不知道什么ES3,ES5,一上来就开始搞ES6,在此留下学习笔记,方 ...
- ES6学习之Babel的正确安装姿势
开始学习ES6,写点东西放上博客^_^ 本文介绍Babel6.x的安装过程~ 首先呢,可以使用Babel在线转换 https://babeljs.io/repl/ 然后进入主题:安装Babel(命令行 ...
- ES6学习之环境配置
环境配置 一.建立工程目录 新建dist文件夹(用于存放转化的es5文件).新建src文件夹(用于存放es6文件),在该文件夹下建立index.js文件 二.编写index.html 在根目录下新建i ...
- .babelrc 文件
文件干啥用的 babel是降es6转义成浏览器能理解的es5语法. 如果项目中用了babel 转移,需要定义babel需要的插件和预设转码. babel 一般可以配合 webpack . browse ...
- javascript的ES6学习总结(第二部分)
1.数组循环 介绍数组循环之前,先回顾一下ES5数组的循环 (1)数组遍历(代替普通的for):arr.forEach(callback(val,index,arr){todo}) //val是数组的 ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- .babelrc文件的一些简单的配置
首先现在根目录先生存.babelrc文件 这个文件是用来设置转码的规则和插件的 如果想使用es6语法,必须安装插件 npm install babel-preset-es2015 { "pr ...
随机推荐
- Kali2安装完成后的设置
1.安装中文输入法 vim /etc/apt/sources.list 全部删除,改为国内源 #中科大 deb http://mirrors.ustc.edu.cn/kali kali-rolling ...
- java框架之Hibernate(1)-简介及初使用
简介 hibernate 是一个开源 ORM ( Object / Relationship Mipping ) 框架,它是对象关联关系映射的持久层框架,它对 JDBC 做了轻量级的封装,而我们 ja ...
- java框架之Hibernate(3)-一对多和多对多关系操作
一对多 例:一个班级可以有多个学生,而一个学生只能属于一个班级. 模型 package com.zze.bean; import java.util.HashSet; import java.util ...
- java框架之SpringBoot(3)-日志
市面上的日志框架 日志抽象层 日志实现 JCL(Jakarta Commons Logging).SLF4J(Simple Logging Facade For Java).JBoss-Logging ...
- js中变量名加“-” new Vue()不执行
如var app-1 = new Vue(): 不执行的 var app1 = new Vue(): 才能执行
- 自增ID算法snowflake - C#版
急景流年,铜壶滴漏,时光缱绻如画,岁月如诗如歌.转载一篇博客来慰藉,易逝的韶华. 使用UUID或者GUID产生的ID没有规则 Snowflake算法是Twitter的工程师为实现递增而不重复的ID实现 ...
- 实验隐藏参数"_allow_resetlogs_corruption"的使用
实验环境:OEL 5.7 + Oracle 10.2.0.5 Tips:该参数仅在特殊恢复场景下使用,需要在专业Oracle工程师指导下进行操作. 1.隐藏参数说明 2.故障场景再现 3.非常规恢复 ...
- mac系统maven spring mvc小试牛刀
转: https://blog.csdn.net/Hitourlee/article/details/77930309和https://www.cnblogs.com/xiaowenbo/p/6980 ...
- hdu5517 二维树状数组
题意是给了 n个二元组 m个三元组, 二元组可以和三元组 合并生成3元组,合并条件是<a,b> 与<c,d,e>合并成 <a,c,d> 前提是 b==e, 如果存在 ...
- nginx的启动、停止、重载配置、验证配置
[1]启动 启动nginx系统方式: (1)命令 nginx -c /usr/local/nginx/conf/nginx.conf 说明:-c 参数指定运行nginx系统的自定义配置文件. 若加:使 ...