由于浏览器的版本和兼容性问题,很多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详解的更多相关文章

  1. Maven项目中的pom.xml详解【转】

    什么是pom? pom作为项目对象模型.通过xml表示maven项目,使用pom.xml来实现.主要描述了项目:包括配置文件:开发者需要遵循的规则,缺陷管理系统,组织和licenses,项目的url, ...

  2. Vue项目三、项目中碰到的问题详解

    一.组件的划分创建 方法一: 把页面上需要复用的模块,拆分成组件.比如,页面的header.footer.面包屑.弹出框等拆分成组件.所以在src中应该有一个文件夹(components)专门放这些会 ...

  3. BI项目中的ETL设计详解(数据抽取、清洗与转换 )(转载)

    原文:http://www.cnblogs.com/reportmis/p/5939732.html ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直 ...

  4. Redis在Laravel项目中的应用实例详解

    https://mp.weixin.qq.com/s/axIgNPZLJDh9VFGVk7oYYA 在初步了解Redis在Laravel中的应用 那么我们试想这样的一个应用场景 一个文章或者帖子的浏览 ...

  5. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  6. 巨人大哥谈Web应用中的Session(session详解)

    巨人大哥谈Web应用中的Session(session详解) 虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术. ...

  7. VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)

    步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...

  8. 【通信】JDK中的URLConnection参数详解

    JDK中的URLConnection参数详解 来自:http://www.blogjava.net/supercrsky/articles/247449.html 针对JDK中的URLConnecti ...

  9. vue-cli 中的 webpack 配置详解

    本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...

随机推荐

  1. Contains Duplicate leetcode

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  2. 新浪微博iOS SDK UIImage+WBSDKResize.o

    Undefined symbols for architecture armv7: "_kCGImageSourceThumbnailMaxPixelSize", referenc ...

  3. WeMall微商城源码报名插件Apply的主要源码

    WeMall微信商城源码报名插件Apply,用于商城的签到系统,分享了部分比较重要的代码,供技术员学习参考 AdminController.class.php <?php namespace A ...

  4. category类别中添加属性

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #c91b13 } p.p2 { margin: 0.0px 0. ...

  5. ES4:ElasticSearch 使用C#添加和更新文档

    这是ElasticSearch 2.4 版本系列的第四篇: 第一篇:ES1:Windows下安装ElasticSearch 第二篇:ES2:ElasticSearch 集群配置 第三篇:ES3:Ela ...

  6. JavaScript的基本规范

    1.不要在同一行声明多个变量: 2.请使用===/!==来比较true/false或者数值: 3.使用对象字面量替代new Array这种形式: 4.Switch语句必须带有default分支: 5. ...

  7. laravel的延迟消息队列

    laravel的延迟消息队列 这篇来自于看到朋友转的58沈剑的一篇文章:1分钟实现"延迟消息"功能(http://mp.weixin.qq.com/s?__biz=MjM5ODYx ...

  8. 分享自己使用CSS的public

    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,td,figure{marg ...

  9. 【2017-03-20】HTML基础知识、文字标记、图片标记、空格换行、表格、表格嵌套及布局、超链接

    一.HTML基础知识 HTML: 网站(站点) - 网页 网站是由一个或者多个网页组合起来的 HTML作为文件后缀名,可以把文件变为网页 HTML是一门编程语言的名字:超文本标记语言 超越了文字的范畴 ...

  10. Alamofire源码解读系列(七)之网络监控(NetworkReachabilityManager)

    Alamofire源码解读系列(七)之网络监控(NetworkReachabilityManager) 本篇主要讲解iOS开发中的网络监控 前言 在开发中,有时候我们需要获取这些信息: 手机是否联网 ...