使用 Babel 将 ES6 转成 ES5 代码

Laravel 内置的 Mix 太过臃肿了，我本身又非常反感 JS NPM 这种低质量代码的包管理方式，所以能少一点 JS 依赖就尽量少一点。所以，我直接抛弃了 Laravel Mix。而且，Laravel Mix 在 Windows WSL 中非常不稳定，安装都会报错，问题颇多，并不想研究。

最终，我决定使用简单的 Babel 替换掉 Laravel Mix，因为我实际上只需要 ES6 转成 ES5 这一个功能。

Babel 的文档写的真好

• 解释了 ES 2015 有哪些新特性
  

Babel 的配置文件

可以在三个地方配置 Babel

• babel.config.js
  
• .babelrc
  
• package.json
  

官方推荐使用 babel.config.js。

但是，我觉得，既然使用了 NPM，就在 package.json 里写挺好的，省了一个配置文件。

presets

presets - 预先装置

如果只需要将 ES2015 转成成 ES5，添加 presets

babel-preset-env

即可。之前的 babel-preset-es2015, babel-preset-es2016, babel-preset-es2017 统一替换为 babel-preset-env。

安装

WSL Ubuntu 18.04

sudo apt update
sudo apt install nodejs
sudo apt install npm
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成之后

> node -v
v8.10.0
> npm -v
3.5.2
> cnpm install --save-dev @babel/core @babel/cli @babel/preset-env

package.json 中添加

"babel": {
    "presets": ["env"]
}

执行

将 ES6 语法文件转换为 ES5，只需要执行

./node_modules/.bin/babel resources/assets/js/score_product_index.js --out-dir public/js/

自动化：命令可以添加到 npm 配置中

{
  "private": true,
  "scripts": {
    "dev": "node_modules/.bin/babel resources/assets/js/ --out-dir public/js/"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4"
  },
  "dependencies": {
    "@babel/polyfill": "^7.2.5"
  },
  "babel": {
    "presets": ["env"]
  }
}

然后执行

npm run dev 

即可。

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式