接手一个2018年老旧项目,使用roadhog@1.3 + react + antd 开发,最近1年只有1个人可以打包,其他人都build 失败。
我来build 一下,真的报错了
UglifyJs xxx
Unexpected token: name (xxx)
百度一下,说是UglifyJs 不支持es6 语法。 我去build 文件看,确实报错的位置就是es6 语法的位置。于是在线转成es5,成功了,,,成功报下一个错,嚓,有多少个地方缺babel 了。为什么babel 没效果了? TODO: 补截图
roadhog 是有配babel 的,但默认会忽略node_modules 里面的文件,如果依赖包的作者没有babel 就会出错。
但为什么我们现在create-react-app 就没有这个错呢?查了一下react-scripts@5.0.1 的webpack 模板,原来已经改用terser-webpack-plugin 代替 UglifyJs了。
好吧,我们看看roadhog@1.3 还有没有得救。然后查了roadhog 文档,md,作者已经弃坑多年,v1.3 支持的配置很少,绕了很多圈,发现没有一个配置能用,最后只能用webpack.config.js 来兜底。
(查webpack 3 旧文档好累) www.webpackjs.com/plugins/ugl… 可以通过设置include 加入需要转码的包位置。但比较麻烦,每次加新包,都需要判断是否需要include 到babel 里面。
我们再看看create-react-app 有没有思路。
cra 分开了两个babel-loader 的配置,参考通过exclude 的方式,把node_module 里面的es6 都处理好了。
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/
调整好webpack 配置后,成功build 了,以后又可以愉快地跑流水线了。