本文介绍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. NET中级课--文件,流,序列化3

    1.序列化:将对象及状态保存起来. 反序列化就是逆操作. 2.NET提供了一个接口:System.runtime.serialization.IFormatter接口, 还有实现了这个接口的类Bina ...

  2. 提示框的优化之自定义Toast组件之(三)Toast组件优化

    开发步骤: 在toast_customer.xml文件中添加一个图片组件对象显示提示图片 <?xml version="1.0" encoding="utf-8&q ...

  3. iOS 中的正则匹配(工具类方法)

    正则表达式 正则表达式是对字符串操作的一种逻辑公式, 用事先定义好的一些特定字符.及这些特定字符的组合, 组成一个"规则字符串", 这个"规则字符串"用来表达对 ...

  4. web验证码

    前台引用.aspx: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="YanZh ...

  5. C++服务器设计(七):聊天系统服务端实现

    在之前的章节中,我们对服务端系统的设计实现原理进行了剖析,在这一章中,我们将对服务端框架进行实际运用,实现一款运行于内网环境的聊天系统.该聊天系统由客户端与服务器两部分组成,同时服务端通过数据库维护用 ...

  6. Mysql操作个人收集

    1.MySQL修改root密码 mysql> UPDATE user SET Password=PASSWORD('xxxx') where USER='root'; mysql> FLU ...

  7. POI操作Excel常用方法总结

    转载自:http://blog.csdn.net/xjun15/article/details/5805429 一. POI简介 Apache POI是Apache软件基金会的开放源码函式库,POI提 ...

  8. HTML5简单入门系列(八)

    前言 本篇介绍HTML5中相对复杂的一些APIs,其中的数学知识比较多.虽然如此,但是其实API使用起来还是比较方便的. 这里说明一下,只写出API相关的JS代码,因为他们都是基于一个canvas标签 ...

  9. 为编写网络爬虫程序安装Python3.5

    1. 下载Python3.5.1安装包1.1 进入python官网,点击menu->downloads,网址:https://www.python.org/downloads/ 1.2 根据系统 ...

  10. Python计算机视觉3:模糊,平滑,去噪

    我是一名初学者,如果你发现文中有错误,请留言告诉我,谢谢 图像的模糊和平滑是同一个层面的意思,平滑的过程就是一个模糊的过程. 而图像的去噪可以通过图像的模糊.平滑来实现(图像去噪还有其他的方法) 那么 ...