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

  

 还有一个链接介绍es5的功能的

 参考链接

JS语法转换-ES6转ES5的更多相关文章

  1. babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效

    我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...

  2. 利用babel工具将es6语法转换成es5,Object.assign方法报错

    一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...

  3. ES6+转ES5(webpack+babel、指定多个js文件、自动注入)

    接续上篇ES6+转ES5,本篇将使用webpack和babel将多个不同目录下指定的多个ES6+语法的js文件编译为ES5,并将编译后的文件配置注入对应的html文件. 所需环境node.npm.设置 ...

  4. JS语法-ES6

    1.介绍 ECMAScript 6简称ES6,是JavaScript语言的下一代标准. 2.常用属性及方法 2.1常量与变量的定义 在JavaScript中,我们一般使用var来定义变量,实际上它是有 ...

  5. webpack 兼容低版本浏览器,转换ES6 ES7语法

    ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...

  6. es6转es5 在线转换工具

    es6转es5 在线转换工具 Babeljs es6console

  7. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  8. vue2.0在android5.0白屏, es6转es5保证浏览器兼容性

    1. 安装 npm install --save-dev babel-preset-es2015 2. 安装 npm install --save-dev babel-preset-stage-3 3 ...

  9. es6转es5

    一.在没有IDE情况下的转换 在"我的电脑->D盘”新建个文件夹es6,文件夹里新建一个文件es6.js. 打开命令行窗口 1.先全局安装babel-cli,输入命令 npm inst ...

随机推荐

  1. 舵机&数据处理&stm32内存之堆栈溢出(遇到的问题)

    产品名称:TOWER PRO(辉盛)大扭力舵机MG996R (MG995升级产品)6v/11Kg厂家编号:MG996R产品净重: 55g产品尺寸: 40.7*19.7*42.9mm产品拉力: 9.4k ...

  2. 【LOJ565】【LibreOJ Round #10】mathematican 的二进制 DP 分治FFT

    题目大意 有一个无限长的二进制串,初始时它的每一位都为 \(0\).现在有 \(m\) 个操作,其中第 \(i\) 个操作是将这个二进制串的数值加上 \(2^{a_i}\).我们称每次操作的代价是这次 ...

  3. nginx编译安装指定参数

    --prefix=/app/nginx # 安装目录 --conf-path=/app/nginx/conf/nginx.conf # 配置文件 --sbin-path=/app/nginx/sbin ...

  4. Luogu P4643 【模板】动态dp

    题目链接 Luogu P4643 题解 猫锟在WC2018讲的黑科技--动态DP,就是一个画风正常的DP问题再加上一个动态修改操作,就像这道题一样.(这道题也是PPT中的例题) 动态DP的一个套路是把 ...

  5. Meterpreter提权详解

      0x01 Meterpreter自动提权 1.生成后门程序 我们在kali的命令行下直接执行以下命令获得一个针对windows的反弹型木马: msfvenom -p windows/meterpr ...

  6. jmeter笔记(1)--原理,下载与安装

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文 ...

  7. Error: Can't resolve 'babel-loader'

    在控制台中运行命令“webpack”,出现错误:“ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in.... ...

  8. HDU - 1078 FatMouse and Cheese (记忆化搜索)

    FatMouse has stored some cheese in a city. The city can be considered as a square grid of dimension ...

  9. Android TextView

    常用属性 text:文本框中展示的文字 android:text="下载" android:text="@string/tv_text"     ------- ...

  10. 金融量化分析【day112】:双均线策略

    一.双均线策略 1.什么是双均线策略? 2.实现代码 def initialize(context): set_benchmark('601318.XSHG') set_option('use_rea ...