使用Babel将ES6+转换成ES5

使用Babel将ES6+转换成ES5

做者：吴业飞
时间：2019年2月18日

---

环境，版本信息

node: v8.11.1
npm: v6.5.0
babel: v7.3.0

安装

npm install --save-dev @babel/core @babel/cli @babel/preset-env

npm install --save @babel/polyfill

这里特别说明一下，这两条安装命令是babel官网上的，我在实际安装过程当中使用VScode里的终端，会报错，缘由是不识别@，只要加上""就能够了，像这样

npm install --save-dev '@babel/core' '@babel/cli' '@babel/preset-env'

npm install --save '@babel/polyfill'

配置

在项目根目录建立.babelrc文件

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "entry"
        }
      ]
    ]
  }
复制代码

运行

假设目录结构是

dist
	js
src
	js
		promise.js
node_modules
.babelrc
package-lock.json
package.json
复制代码

咱们在命令行输入./node_modules/.bin/babel ./src/js --out-dir ./dist/js便可将./src/js目录下的全部js文件经过Babel转化后输出到./dist/js目录下

写在最后

本文只介绍了最简单的Babel使用方法，若是要结合构建工具使用，相关配置还需参照babel官网

参考文献

【1】babel官网