ES6转码器babel的使用
1. 进入ES6的项目,执行
npm init // 初始化package.json
2. 在与package.json同一目录下编写配置文件 .babelrc
- {
- "presets": [],
- "plugins": []
- }
安装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
- {
- "presets": [
- "es2015",
- "react",
- "stage-0"
- ],
- "plugins": []
- }
安装 babel-cli 工具,用于命令行转码
npm install --global babel-cli
// 转码输出文件
example.js
- [1,2,3].map(x => x*x);
// 执行转码
babel example.js -o compile.js --presets es2015
转码后的compiled.js文件:
- "use strict";
- [1, 2, 3].map(function (x) {
- return x * x;
- });
实时监听编译文件:
To compile a file every time that you change it, use the --watch
or -w
option:
- $ babel example.js --watch -o compiled.js --presets es2015
babel在线转码工具:
ES6转码器babel的使用的更多相关文章
- es6转码器-babel
babel 基本使用 安装转码规则 # ES2015转码规则 $ npm install --save-dev babel-preset-es2015 # react转码规则 $ npm instal ...
- 安装es6转码工具babel,具体步骤
新建文件夹:testBabel 全局安装Babel:npm install babel-cli -g //babel的命令会成为全局变量,可以直接使用,一般全局后还要装本地(本工程目录) 初始化:np ...
- ES6标准简介之Babel转码器解说
ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5).ES6已于2015年6月正式发布. ...
- 使用babel转码器,让浏览器支持es6语法
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...
- Babel转码器
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.这意味着,你可以用ES6的方法 编写程序,又不用担心现在环境是否支持.
- Babel 转码器 § es6转换es5
Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...
- ES6入门一:ES6简介及Babel转码器
ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码 1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...
- ES6转ES5(Babel转码器)
ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...
- es6 babel转码器安装配置及常见命令
示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...
随机推荐
- 《CSS3秘籍》(第三版)-读书笔记
第3章 选择器:明确设置哪些样式 每个样式(或者规则)由两个主要部分组成:选择器是告诉浏览器要格式化什么内容:声明块则列出浏览器用来给选择器定义样式的格式化指令. 1.标签选择器:整体控制 标签选择器 ...
- docker学习使用
安装什么的就略过了,之前已经整理过,这里就说说自己使用中的一些东西,也是初用,记录下(现在使用win10 64位,使用Docker for Windows直接安装就好[需要专业版win10安装hype ...
- Android自动化预备(下)
上次说道:要具备的一些知识,还有多ADB得理解 本次继续ADB理解: AndroidDebugBridge debugBridge =AndroidDebugBridge.createBridge(& ...
- .net下各个数据类型所占用的字节
Console.WriteLine(sizeof(int)); Console.WriteLine(sizeof(short)); Console.WriteLine(sizeof(char)); C ...
- c++中级 STL基础学习(二)
deque 和vector差不多,可以在前端后端插入,一般用deque取代vector,vector只能在后端插入push_back().deque还可以push_front(),但是deque后端插 ...
- VB6.0 读取Excel文件并返还数据集RecordSet
读取Excel文件并返还数据集RecordSet 该方法适用于.xls,.xlsx类型的文件 读取Excel文件的Function: '取得数据集 Function getRecordSetForEx ...
- Memcache学习php完整一例
header("Content-Type:text/html;charset=utf-8"); /* PHP设置分布式memcache存取 */ //创建memcache对象 $m ...
- maven 创建Hadoop程序
这里用来将新建的maven project 放入到现有的maven working set 中,这样我们就能看到项目之间的层级关系 选择下面的程序 在父项目中创建公共的pom,在pom中维护项目所需要 ...
- 菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven)
菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven) 2012-02-04 13:11 by 虫师, 11419 阅读, 5 评论, 收藏, 编辑 之前我就讲过一种方试来搭 ...
- UWP深入学习四:动画及图像
Storyboarded animations Key-frame animations and easing function animations 缓动函数 缓动函数支持你将自定义数学公式应用到动 ...