In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-03-31 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
这篇文章给大家介绍ES6转ES5的两种方法以及ES6怎样转ES5,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
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
下面是编译后的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就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.