使用 Babel 将 ES6 转成 ES5 代码

更新日期: 2019-03-13 阅读次数: 555 字数: 368 分类: Javascript

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 

即可。

爱评论不评论

近期节日

2019年05月20日 全国助残日
2019年05月21日 小满
2019年05月30日 五卅运动纪念
2019年05月31日 世界无烟日
2019年06月01日 六一儿童节
2019年06月05日 世界环境日
2019年06月06日 芒种
2019年06月06日 全国爱眼日
2019年06月07日 端午节
2019年06月11日 中国人口日
2019年06月16日 父亲节
2019年06月20日 世界难民日
查看更多节日