13518219792
这篇文章给大家介绍ES6转ES5的两种方法以及ES6怎样转ES5，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
创新互联专业为企业提供东山网站建设、东山做网站、东山网站设计、东山网站制作等企业网站建设、网页设计与制作、东山企业网站模板建站服务，10多年东山做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
ES6转ES5（第一种）
初始化项目
npm init --y
安装依赖
npm install babel-cli -D
npm install babel-preset-es2015 -D
在项目中创建并编辑ES6文件
这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。
// src/index.js let a = 1; let fun = ()=>{ console.log(a); }编辑package.json
我们需要自己在scripts字段里添加命令：
build-t ：单独编译某个文件
build-d：把一个文件夹内的所有文件统一编译到另一个文件夹里（文件夹自动生成，不需要自己创建）
build-o：把一个文件夹内的指定文件编译到另外的文件夹里（文件夹需要自己创建，可以指定文件名）
{ "name": "babel01", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build-t":"babel index.js --presets es2015", "build-d": "babel src -d lib --presets es2015", "build-o":"babel src/index.js -o dist/index.js --presets es2015" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" } }启动编译
npm run <这里是scripts字段的命令>
下面是编译后的es5文件。
"use strict"; var a = 1; var fun = function fun() { console.log(a); };ES6转ES5（第二种）
其实跟第一种差不多。
初始化项目
npm init --y
安装依赖
npm install babel-cli -D
npm install babel-preset-es2015 -D
在项目中创建并编辑ES6文件
这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。
{ "presets": ["es2015"], "plugins": [] }编辑package.json
我们需要自己在scripts字段里添加命令，命令内容与第一种方法的一样，这里只不过省了--presets es2015。
{ "name": "babel01", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build":"babel src/index.js -o dist/index.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" } }启动编译
npm run build
下面是编译后的es5文件。
"use strict"; var a = 1; var fun = function fun() { console.log(a); };ES6+转ES5
这里 ES6+ 说的是ES6、ES7、ES8等。
初始化项目
npm init --y
安装依赖
npm install babel-cli -D
npm install babel-preset-env -D
在项目中创建并编辑ES6文件
这里只是使用es6的语法举下例子，看下能否转译成es5语法。我们假设取名index.js，放在项目根目录的src文件夹里。
// src/index.js let a = 1; let fun = ()=>{ console.log(a); }在项目中创建并编辑.babelrc文件
在根目录下创建.babelrc文件。
{ "presets": ["env"] }编辑package.json
命令内容不只是这一个，根据你需求写，其他命令可以看上面的ES6转ES5（第一种）。
{ "name": "babel01", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "babel src -d dist" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" } }启动编译
npm run build
下面是编译后的es5文件。
"use strict"; var a = 1; var fun = function fun() { console.log(a); };关于ES6转ES5的两种方法以及ES6怎样转ES5就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
