记一次修复工程构建问题

89 阅读1分钟

接手一个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 就会出错。

roadhog1.jpg

但为什么我们现在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.jpg

cra 分开了两个babel-loader 的配置,参考通过exclude 的方式,把node_module 里面的es6 都处理好了。

test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/

调整好webpack 配置后,成功build 了,以后又可以愉快地跑流水线了。