项目中如何使用babel6详解
由于浏览器的版本和兼容性问题,很多es6,es7的新的方法都不能使用,等到可以使用的时候,可能已经过去了很多年。Babel可以把es6,es7的新代码编译成兼容绝大多数的主流浏览器的代码。
本篇文章主要介绍在项目中如何安装配置和使用babel.
1.在项目下初始化 package.json
$ npm init
2.在项目中安装babel
$ npm install babel-cli --save-dev
3.安装babel插件
$ npm install babel-preset-xxxxxx --save-dev
Babel5是默认包含各种转换插件,Babel6.x相关转换插件需要下载对应的插件,如果不去安装这些插件,那么在命令行进行转换时是不会有任何效果的.下面以安装es2015举例
$ npm install babel-preset-es2015 --save-dev
还有其他插件,在对文件进行配置的部分详细介绍
4.配置文件.babelrc
把所使使用的插件对应的规则加入.babelrc
。
{
"presets": ["es2015"],
"plugins": ["transform-es2015-arrow-functions"]
}
配置presets:
a) es2015:
check-es2015-constants // 检验const常量是否被重新赋值 transform-es2015-arrow-functions // 编译箭头函数 transform-es2015-block-scoped-functions // 函数声明在作用域内 transform-es2015-block-scoping // 编译const和let transform-es2015-classes // 编译class transform-es2015-computed-properties // 编译计算对象属性 transform-es2015-destructuring // 编译解构赋值 transform-es2015-duplicate-keys // 编译对象中重复的key,其实是转换成计算对象属性 transform-es2015-for-of // 编译for…of transform-es2015-function-name // 将function.name语义应用于所有的function transform-es2015-literals // 编译整数(8进制/16进制)和unicode transform-es2015-modules-commonjs // 将modules编译成commonjs transform-es2015-object-super // 编译super transform-es2015-parameters // 编译参数,包括默认参数,不定参数和解构参数 transform-es2015-shorthand-properties // 编译属性缩写 transform-es2015-spread // 编译展开运算符 transform-es2015-sticky-regex // 正则添加sticky属性 transform-es2015-template-literals // 编译模版字符串 transform-es2015-typeof-symbol // 编译Symbol类型 transform-es2015-unicode-regex // 正则添加unicode模式 transform-regenerator // 编译generator函数
b) es2016:
transform-exponentiation-operator // 编译幂运算符
c) es2017:
syntax-trailing-function-commas // function最后一个参数允许使用逗号 transform-async-to-generator // 把async函数转化成generator函数
d) latest:latest是一个特殊的presets,到目前为止包括了es2015,es2016,es2017的插件。
e) react:加入了flow,jsx等语法.
f) stage-x(stage-0/1/2/3/4):按照JavaScript的提案阶段区分的,一共有5个阶段。而数字越小,阶段越靠后.
配置plugins:
引入需要的插件,以下仅以引入箭头函数举例
{
"plugins": ["transform-es2015-arrow-functions"]
}
另外babel还支持自定义presets 和 plugins.
完成以上配置就安装好babel了, 可以使用以下的babel的命令进行编译了
1.在当前命令行输出转换
babel test1.js
2.将转换后的js输出到指定文件中(使用 -o 或 --out-file )
babel a.js -o b.js babel a.js --out-file b.js
3.实时监控(使用 -w 或 --watch )
babel a.js -w --out-file b.js babel a.js --watch --out-file b.js
4.编译文件夹并输出到文件夹中(使用 -d 或 --out-dir )
babel src -d lib babel src --out-dir lib
项目中如何使用babel6详解的更多相关文章
- Maven项目中的pom.xml详解【转】
什么是pom? pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url, ...
- Vue项目三、项目中碰到的问题详解
一.组件的划分创建 方法一: 把页面上需要复用的模块,拆分成组件.比如,页面的header.footer.面包屑.弹出框等拆分成组件.所以在src中应该有一个文件夹(components)专门放这些会 ...
- BI项目中的ETL设计详解(数据抽取、清洗与转换 )(转载)
原文:http://www.cnblogs.com/reportmis/p/5939732.html ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直 ...
- Redis在Laravel项目中的应用实例详解
https://mp.weixin.qq.com/s/axIgNPZLJDh9VFGVk7oYYA 在初步了解Redis在Laravel中的应用 那么我们试想这样的一个应用场景 一个文章或者帖子的浏览 ...
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- 巨人大哥谈Web应用中的Session(session详解)
巨人大哥谈Web应用中的Session(session详解) 虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术. ...
- VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)
步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...
- 【通信】JDK中的URLConnection参数详解
JDK中的URLConnection参数详解 来自:http://www.blogjava.net/supercrsky/articles/247449.html 针对JDK中的URLConnecti ...
- vue-cli 中的 webpack 配置详解
本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...
随机推荐
- 一个很逗的东西——Jd
这个嘛是本人专门为了NOI上面对拍程序写的对拍程序,已经经历了NOI2015的考验:更重要的是——纯Pascal的哦(HansBug:其实是我不会写.sh脚本TT,谁叫用惯了windows的我只会写b ...
- ANdrod Studio查看Sha1的方法
在用Studio做开发中,有时候根据业务需求,需要集成一些SDk,举个例子,百度的鹰眼定位,当然还有很多,在创建项目的时候需要输入sha1值,这个sha1值的获取有多种方式,我记得百度有个检测,就可以 ...
- [Spark] - SparkCore程序优化总结
http://spark.apache.org/docs/1.6.1/tuning.html1) 代码优化 a. 对于多次使用的RDD,进行数据持久化操作(eg: cache.persist) b. ...
- android 仿摩拜单车共享单车进度条实现StepView
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6552712.html 先看效果图: Step1:定义StepBean 定义五个状态,分别为:为完成.正在进行 ...
- 有个程序猿要去当CEO了:(二)扬帆起航
合同签好了. 从昨天下午三点半,一直修改到晚上七点半,才确定签下. 这过程中,有一点讨论得比较久: 就是甲方要不要也拿底薪. 甲方是这样说的:"总经理拿N仟元,董事长不要说比总经理高,但是也 ...
- spring学习——注入静态对象属性
spring注入静态对象属性时,因为虚拟机类加载问题,直接在属性上使用@Autowired 是不可以的.需要在属性对应的set方法上@Autowired,并且,set方法不能定义为static. 1. ...
- 《转载-两篇很好的文章整合》Android中自定义控件
两篇很好的文章,有相互借鉴的地方,整合到一起收藏 分别转载自:http://blog.csdn.net/xu_fu/article/details/7829721 http://www.cnblogs ...
- @ModelAttribute--SpringMVC 注解系列文章(二)
概述 在日常的开发工作中,更新操作是经常会涉及到的一个功能,但是对于一条记录的更新,往往只会更新一部分的信息,而不会整条记录都更新,比如修改用户年龄的时候,用户密码是不需要修改的,针对这种情况,处理的 ...
- 我的Python之路【第一篇】:Python简介和入门
1.搭建Python环境 windows下搭建python环境 1.下载安装包 2.Windows中Python的安装包是后缀名为msi的安装包,直接双击下一步即可 3.Windwos环境下默认的安装 ...
- bootstrap file input 官方文档翻译
file Input官方文档 中文翻译 file input 特性 1.这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js ...