使用 Babel 将 ES6 转成 ES5 代码

更新日期: 2019-03-13 阅读次数: 1540 字数: 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年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
2019年10月10日 辛亥革命纪念日
查看更多节日