使用babel将ES6转化成ES5

Posted 2021-12-10 颖卫的小客栈

使用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