本文介绍Babel6.x的安装过程~

首先呢,可以使用Babel在线转换 https://babeljs.io/repl/

然后进入主题:安装Babel(命令行环境,针对Babel6.x版本)

1、首先安装babel-cli(用于在终端使用babel)

  npm install -g babel-cli

2、然后安装babel-preset-es2015插件

  npm install --save babel-preset-es2015

  注:Babel5版本默认包含各种转换插件,然而Babel6.x相关转换插件需要自己下载,如transform-es2015-arrow-functions、transform-es2015-classes等,而ES2015 preset包含了所有插件。如果不安装任何插件,那么在命令行进行转换是没有任何效果的!

  其中--save参数自动更新package.json文件,写进依赖项

3、在命令行输入:

  babel es6.js --presets es2015

输出:

  "use strict";

  [1, 2, 3].map(function (x) {
   return x * x;
  });

  注:后面的参数--presets es2015表示使用该插件进行编译,如果不写上转换是没有效果的。

 

4、插件配置

  每一次都写上该参数那是很麻烦的,可以在当前目录下新建配置文件 .babelrc。

  但是在windows系统中,不允许直接右键建立没有文件名的文件,可以通过cmd命令行创建:在当前文件夹打开cmd并键入命令

  type nul>.babelrc

  即可在当前目录下建立文件.babelrc,接着在文件中写入:

{
"presets": ["es2015"]
}

  那么就可以直接在命令行中使用babel es6.js进行转换而无需添加表明所用插件的参数

  除了建立.babelrc文件之外,也可在package.json中进行配置,添加以下属性即可:

  "babel": {
  "presets": ["es2015"]
}

附Babel常用命令:

1、转换es6.js文件并在当前命名行程序窗口中输出

  babel es6.js

2、将es6.js转换后输出到es5.js文件中(使用 -o 或 --out-file )

  babel es6.js -o es5.js 

  babel es6.js --out-file es5.js

3、实时监控es6.js一有变化就重新编译(使用 -w 或 --watch )

  babel es6.js -w --out-file es5.js
  babel es6.js --watch --out-file es5.js

4、编译整个src文件夹并输出到lib文件夹中(使用 -d 或 --out-dir )

  babel src -d lib
  babel src --out-dir lib

5、编译整个src文件夹并输出到一个文件中

  babel src --out-file es5.js

6、直接输入babel-node命令,可以在命令行中直接运行ES6代码

  babel-node

Babel6.x 转换ES6的更多相关文章

  1. babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效

    我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...

  2. webpack(三)使用 babel-loader 转换 ES6代码

    查询各个 loader的使用,可以在官网上查询. https://www.npmjs.com (一)安装 babel-loader,babel-core.   使用命令 npm install --s ...

  3. webstrom如何配置babel来转换es6

    网上有很多关于如何设置babel的.我学习着设置,但总差那么几步,没能满足我的需求. 我使用的是webStorm2017.1版本. babel安装准备 使用webStorm自带的filewatcher ...

  4. webpack 兼容低版本浏览器,转换ES6 ES7语法

    ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...

  5. 使用babel转换es6编写的程序

    配置文件 Babel的配置文件是.babelrc,存放在项目的根目录下.使用Babel的第一步,就是配置这个文件,这是必要的一步. 该文件用来设置转码规则和插件,基本格式如下. { "pre ...

  6. JS语法转换-ES6转ES5

    1.使用Babel转码 全局安装 npm install -g babel-cli 布局安装 npm install -g babel-cli --save-dev Babel的配置文件是.babel ...

  7. 使用gulp-babel转换Es6出现exports is not defined 问题

    //问题描述:当使用import导入模块时,出现exports is not defined //1.安装插件 npm install --save-dev babel-plugin-transfor ...

  8. 转换es6

    { "presets": [["env", { "modules": false }],"stage-3"," ...

  9. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

随机推荐

  1. uva11624 - Fire!

    uva11624 - Fire! 火在蔓延,人在走.火会蔓延,不会熄灭,我们可以确定某个点着火的时间(广搜).对于J来说,要是他走到某点的时间比火蔓延到该点的时间要短,那么他走到该点的时候,火还没蔓延 ...

  2. SQLLoader8(加载的数据中有换行符处理方法)

    SQLLDR加载的数据中有换行符处理方法1.创建测试表: CREATE TABLE MANAGER( MGRNO NUMBER, MNAME ), JOB ), REMARK ) ); 2.创建控制文 ...

  3. WEB服务器2--IIS架构(转)

    开始之前可以先读:http://www.cnblogs.com/tiantianle/p/5419445.html 原文:http://www.cnblogs.com/arbin98/archive/ ...

  4. C语言基础知识汇总

    c语言执行步骤: 一.编辑程序 1.编写c语言的代码,保存在扩展名.c的文件中,源文件. 2.编写代码有三种方式: a.vi命令方式系统自带 b.ultraedit网络下载 c.xcode网络下载 二 ...

  5. c#程序为PDF文件填写表单内容

    众所周知,PDF文件一般情况下是无法修改的,如果你有一张现成的PDF表格,这时想通过编程实现从数据库或者动态生成内容去填写这张表格,就会有些问题了,首先我们要解决以下2个重要的问题: 1.如何将内容写 ...

  6. javascript sort排序

    var arr = [5,32,28,66,2,15,3]; arr.sort(function(a1,a2){ return a1-a2; //a2-a1 输入倒序 }); console.log( ...

  7. (原+译)win7远程连接ubuntu16.04

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5711214.html 原始网址: http://ubuntuhandbook.org/index.ph ...

  8. Android实现点击事件的4种方式

    一.通过在activity_main.xml中,按钮button控件中添加onclick事件实现 在   activity_main.xml 对应的按钮Button中加入下面红色事件 <Butt ...

  9. win8系统intellij输入中文问题

    用上新的intellij,不过在输入汉字时出现后面的被删除,网上找了,没有找到解决方案,只有自己解决了,感觉如果是intellij不兼容win8,那么就不能用intellij,那对于习惯了intell ...

  10. web 前端 shopnc项目 首页分类一开始做前端,我是拒绝的

    看图别说话 经过几小时的折腾 主要还是靠耐心