使用babel将ES6转化成ES5

使用babel将ES6转化成ES5

有些浏览器还不支持ES6语法,这是我们需要将ES6语法转换成ES5,除了可以利用webpack的自动编译转换功能之外,也可使用babel进行转换。

出处:https://blog.csdn.net/kerelee_li/article/details/82349131

转换步骤如下:

1.创建文件及目录如下,dist文件夹下为Babel转化后的ES5文件;src文件夹下为自己编写的ES6文件

 使用babel将ES6转化成ES5

 

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

上一篇:es6转es5 (babel)


下一篇:原型对象中的this指向问题,ES5继承