本文介绍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. 基于MapReduce的SimRank++算法研究与实现

    一.算法应用背景 计算广告学(Computational Advertising)是一门广告营销科学,以追求广告投放的收益最大化为目标,重点解决用户与广告匹配的相关性和广告的竞价模型问题,涉及到自然语 ...

  2. Linux下Samba的配置

    前言: 为了实现windows 和 Linux以及其它操作系统之间的资源共享,软件商推出nfs 和samba两种解决方案.因为市场上缺乏象pc-nfs那样的client工具,使得Linux和windo ...

  3. kaggle之手写体识别

    kaggle地址 数据预览 首先载入数据集 import pandas as pd import numpy as np train = pd.read_csv('/Users/frank/Docum ...

  4. Android5.0新特性:RecyclerView实现上拉加载更多

    RecyclerView是Android5.0以后推出的新控件,相比于ListView可定制性更大,大有取代ListView之势.下面这篇博客主要来实现RecyclerView的上拉加载更多功能. 基 ...

  5. css中使用rgba和opacity设置透明度的区别

    1.使用rgba设置背景色的透明 效果如下: <body> <div id="box"> 你好啊! </div> </body> b ...

  6. PHP学习笔记十九【析构函数】

    <?php class Person{ public $name; public $age; public function __construct($iname,$iage) { $this- ...

  7. java web移植 遇到Project facet Java version 1.7 is not supported

    在移植eclipse项目时,如果遇到 "Project facet Java version 1.7 is not supported." 项目中的jdk1.7不支持.说明项目是其 ...

  8. C++服务器设计(二):应用层I/O缓冲

    数据完整性讨论 我们已经选择了I/O复用模型作为系统底层I/O模型.但是我们并没有具体解决读写问题,即在我们的Reactor模式中,我们怎么进行读写操作,才能保证对于每个连接的发送或接收的数据是完整的 ...

  9. oracle日记

    win7旗舰版安装oracle11g 64位用sql plus可以登录 但用pl/sql dev报错ORA-12560 小型数据库:access.foxbase 中型数据库:mysql.sqlserv ...

  10. cmd下操作mysql

      将mysql 安装目录下 的bin 添加到 windows 环境变量        步骤:        我的电脑 ->高级->环境变量->path->选择一个用户-> ...