使用 Babel 将 ES6 转成 ES5 代码

更新日期: 2019-03-13 阅读次数: 178 字数: 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 

即可。

领取阿里云图片 CDN 优惠券

阿里云 CDN 优惠券,最高可领 1888 元

爱评论不评论

近期节日

2019年04月01日 愚人节
2019年04月01日 复活节
2019年04月02日 国际儿童图书日
2019年04月04日 寒食节
2019年04月05日 清明节
2019年04月07日 世界卫生日
2019年04月11日 世界帕金森病日
2019年04月20日 谷雨
2019年04月22日 世界地球日
2019年04月23日 世界读书日
2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
查看更多节日