使用babel将ES6转化成ES5
有些浏览器还不支持ES6语法,这是我们需要将ES6语法转换成ES5,除了可以利用webpack的自动编译转换功能之外,也可使用babel进行转换。
出处:https://blog.csdn.net/kerelee_li/article/details/82349131
转换步骤如下:
1.创建文件及目录如下,dist文件夹下为Babel转化后的ES5文件;src文件夹下为自己编写的ES6文件
2.打开终端,输入以下命令。在安装babel之前,需要初始化我们的项目
F:\HTMl\babel> npm init -y
3.这时会产生一个package.json文件,name可以进行修改
{ "name": "babel", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
4.全局安装Babel-cli
npm install -g babel-cli
5.本地安装babel-preset-es2015 和 babel-cli
npm install --save-dev babel-preset-es2015 babel-cli
这时打开package.json文件,多了一个
"devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1" }
6.新建.babelrc ,在根目录下新建.babelrc文件,并录入以下的代码
{ "presets":[ "es2015" ], "plugins":[] }
这个文件建立后,就可以在终端输入的转换命令了,将ES6成功转化为ES5的语法。
F:\HTMl\babel> babel src/index.js -o dist/index.js
问题:
Couldn't find preset "es2015" relative to directory
解决方法:
npm install babel-preset-es2015 --save-dev
出处:https://blog.csdn.net/qq_36525300/article/details/100905194