ES6转ES5的两种方法以及ES6怎样转ES5

这篇文章给大家介绍ES6转ES5的两种方法以及ES6怎样转ES5,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

创新互联专业为企业提供东山网站建设、东山做网站、东山网站设计、东山网站制作等企业网站建设、网页设计与制作、东山企业网站模板建站服务,10多年东山做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

 ES6转ES5(第一种)
初始化项目

npm init --y

安装依赖

  1. 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

安装依赖

  1. 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

安装依赖

  1. 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就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


网站名称:ES6转ES5的两种方法以及ES6怎样转ES5
本文来源:http://pwwzsj.com/article/gcjjgj.html