JS语法转换-ES6转ES5
1.使用Babel转码
全局安装
npm install -g babel-cli
布局安装
npm install -g babel-cli --save-dev
Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,需要配置这个文件。
{
"presets": [],
"plugins": []
}
点击此处到Babel中文官网presets配置页面:Babel Plugins
# 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
根据自己需要 将配置文件修改
{
"presets": [
"es2015"
],
"plugins": []
}
然后在命令行开始转es5
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel a.js --out-file b.js
# 或者 缩写
$ babel a.js -o b.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib # -s 参数生成source map文件
$ babel src -d lib -s
2.gulp
安装gulp
npm install gulp --save-dev
安装gulp的转码工具 babel
npm install --save-dev gulp-babel
安装完成后 会发现package.json中
{
"devDependencies": {
"babel-cli": "^6.22.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2"
}
}
编写gulpfile.js文件,设置任务 转码
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/a.js")
.pipe(babel())
.pipe(gulp.dest("lib"));
});
在命令行输入,src文件夹中的a.js已经被转码成ES5标准的a.js。(在了lib文件夹)
gulp
JS语法转换-ES6转ES5的更多相关文章
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...
- 利用babel工具将es6语法转换成es5,Object.assign方法报错
一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...
- ES6+转ES5(webpack+babel、指定多个js文件、自动注入)
接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...
- JS语法-ES6
1.介绍 ECMAScript 6简称ES6,是JavaScript语言的下一代标准. 2.常用属性及方法 2.1常量与变量的定义 在JavaScript中,我们一般使用var来定义变量,实际上它是有 ...
- webpack 兼容低版本浏览器,转换ES6 ES7语法
ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...
- es6转es5 在线转换工具
es6转es5 在线转换工具 Babeljs es6console
- 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5
Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...
- vue2.0在android5.0白屏, es6转es5保证浏览器兼容性
1. 安装 npm install --save-dev babel-preset-es2015 2. 安装 npm install --save-dev babel-preset-stage-3 3 ...
- es6转es5
一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...
随机推荐
- 金融量化之Tushare模块
一.介绍 Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多样的便于分析的数据,为他们 ...
- SVN Error:Error performing cleanup for
这个错误,是由于我误删了lib中的jar导致的 一 首先,下载 sqlite3 然后把sqlite3.exe 放到项目文件夹中的.svn文件夹. 如下: 二 接着运行cmd 转到.svn下 三 输入 ...
- 「洛谷3469」「POI2008」BLO-Blockade【Tarjan求割点】
题目链接 [洛谷传送门] 题解 很显然,当这个点不是割点的时候,答案是\(2*(n-1)\) 如果这个点是割点,那么答案就是两两被分开的联通分量之间求组合数. 代码 #include <bits ...
- UOJ#348 州区划分
解:有一个很显然的状压...... 就设f[s]表示选的点集为s的时候所有方案的权值和. 于是有f[s] = f[s \ t] * (sum[t] / sum[s])P. 这枚举子集是3n的. 然后发 ...
- (二)Qt窗口应用程序Widget
QMainWindow,QWidget,QDialog,这三基类都可以作为顶层窗口 QWidget:是所有窗口类的父类,功能最简单 QMainWindow:如果窗口需要菜单栏,工具栏,状态栏,就需要Q ...
- 继续沿用旧的网络访问模式Apache HTTP 客户端,防止Android9闪退
注意位置,在application 节点里面.
- openstack项目【day24】:KVM部署
本节内容 虚拟化支持 软件准备 检查CPU虚拟化支持 安装软件包 激活并启动libvirtd服务 网络模式 配置桥接网络 验证网络 尝试连接Hypervisor 创建虚拟机 虚拟机操作 一.虚拟化支持 ...
- .net异步委托
委托Delegate是一个类,定义了方法的类型, 使得可以将方法当做另一个方法的参数来进行传递,这种将方法动态地赋给参数的做法,可以避免在程序中大佬使用If-Else(Switch)语句,同时使得程序 ...
- [物理学与PDEs]第2章第2节 粘性流体力学方程组 2.1 引言
1. 实际的流体与理想流体的主要区别在于: 前者具有粘性 (内摩擦) 和热传导. 2. 内摩擦 (1) 当两层流体有相对运动时, 方有摩擦力; 它是一种内力; 单位面积上所受的内力称为应力; 而 ...
- idea+maven+ssm搭建boot_crm项目遇到的问题
使用idea+maven+ssm搭建一个boot_crm项目,遇到的问题如下: 1.环境搭建好了,相关配置文件都配置好了,也部署到了tomcat,但是无法启动首页. 通过百度,google找到了,原因 ...