1. 进入ES6的项目,执行

npm init // 初始化package.json

2. 在与package.json同一目录下编写配置文件 .babelrc

  1. {
  2. "presets": [],
  3. "plugins": []
  4. }

安装babel

// es2015转码规则

npm install --save-dev babel-preset-es2015

// react转码规则

npm install --save-dev babel-preset-react

// ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个

npm install --save-dev babel-preset-stage-0

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3

然后,将安装好的规则加入到 .babelrc

  1. {
  2. "presets": [
  3. "es2015",
  4. "react",
  5. "stage-0"
  6. ],
  7. "plugins": []
  8. }

安装 babel-cli 工具,用于命令行转码

npm install --global babel-cli

// 转码输出文件

example.js

  1. [1,2,3].map(x => x*x);

// 执行转码

babel example.js -o compile.js --presets es2015

转码后的compiled.js文件:

  1. "use strict";
  2.  
  3. [1, 2, 3].map(function (x) {
  4. return x * x;
  5. });

实时监听编译文件:

To compile a file every time that you change it, use the --watch or -w option:

  1. $ babel example.js --watch -o compiled.js --presets es2015

babel在线转码工具:

https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code=

ES6转码器babel的使用的更多相关文章

  1. es6转码器-babel

    babel 基本使用 安装转码规则 # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm instal ...

  2. 安装es6转码工具babel,具体步骤

    新建文件夹:testBabel 全局安装Babel:npm install babel-cli -g //babel的命令会成为全局变量,可以直接使用,一般全局后还要装本地(本工程目录) 初始化:np ...

  3. ES6标准简介之Babel转码器解说

    ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5).ES6已于2015年6月正式发布. ...

  4. 使用babel转码器,让浏览器支持es6语法

    ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...

  5. Babel转码器

    Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.这意味着,你可以用ES6的方法 编写程序,又不用担心现在环境是否支持.

  6. Babel 转码器 § es6转换es5

    Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...

  7. ES6入门一:ES6简介及Babel转码器

    ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...

  8. ES6转ES5(Babel转码器)

    ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...

  9. es6 babel转码器安装配置及常见命令

    示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...

随机推荐

  1. 《CSS3秘籍》(第三版)-读书笔记

    第3章 选择器:明确设置哪些样式 每个样式(或者规则)由两个主要部分组成:选择器是告诉浏览器要格式化什么内容:声明块则列出浏览器用来给选择器定义样式的格式化指令. 1.标签选择器:整体控制 标签选择器 ...

  2. docker学习使用

    安装什么的就略过了,之前已经整理过,这里就说说自己使用中的一些东西,也是初用,记录下(现在使用win10 64位,使用Docker for Windows直接安装就好[需要专业版win10安装hype ...

  3. Android自动化预备(下)

    上次说道:要具备的一些知识,还有多ADB得理解 本次继续ADB理解: AndroidDebugBridge debugBridge =AndroidDebugBridge.createBridge(& ...

  4. .net下各个数据类型所占用的字节

    Console.WriteLine(sizeof(int)); Console.WriteLine(sizeof(short)); Console.WriteLine(sizeof(char)); C ...

  5. c++中级 STL基础学习(二)

    deque 和vector差不多,可以在前端后端插入,一般用deque取代vector,vector只能在后端插入push_back().deque还可以push_front(),但是deque后端插 ...

  6. VB6.0 读取Excel文件并返还数据集RecordSet

    读取Excel文件并返还数据集RecordSet 该方法适用于.xls,.xlsx类型的文件 读取Excel文件的Function: '取得数据集 Function getRecordSetForEx ...

  7. Memcache学习php完整一例

    header("Content-Type:text/html;charset=utf-8"); /* PHP设置分布式memcache存取 */ //创建memcache对象 $m ...

  8. maven 创建Hadoop程序

    这里用来将新建的maven project 放入到现有的maven working set 中,这样我们就能看到项目之间的层级关系 选择下面的程序 在父项目中创建公共的pom,在pom中维护项目所需要 ...

  9. 菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven)

    菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven) 2012-02-04 13:11 by 虫师, 11419 阅读, 5 评论, 收藏, 编辑 之前我就讲过一种方试来搭 ...

  10. UWP深入学习四:动画及图像

    Storyboarded animations Key-frame animations and easing function animations 缓动函数 缓动函数支持你将自定义数学公式应用到动 ...