使用 Babel 将 ES6 转成 ES5 代码

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

即可。

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年07月22日 大暑
2020年07月30日 非洲妇女日
2020年08月01日 八一建军节
2020年08月06日 国际电影节
2020年08月07日 立秋
2020年08月15日 日本投降日
2020年08月22日 处暑
2020年08月25日 七夕
2020年09月02日 中元节
2020年09月03日 抗日胜利纪念日
2020年09月07日 白露
2020年09月08日 国际扫盲日
查看更多节日