记一次生产构建的报错

uncaught syntaxerror: unexpected token '...'

背景

在处理展示markdown文本功能，并且其中的代码高亮功能时，引入了两个第三发的依赖包marked 和 highlight.js ，本地功能调试正常之后，一如即往的没有build测试的习惯，所以直接退代码上线部署；

build上线之后，当在加载我的网站main.js时，控制台报错uncaught syntaxerror: unexpected token '...'

确定问题

当你点击跳转到浏览器开发者工具的 sources 这个选项卡，发现是 剩余参数运算符 浏览器不认识，一定是没有babel转义。

babel官网测试转义，发现需要开启此项配置forceAllTransforms，就可以进行转义剩余参数运算符

解决问题

既然是babel问题，那首先就想到了是webpack配置（使用react-create-app脚手架创建的项目）

默认脚手架生成的webpack.config.js中，关于外部依赖的构建是用了babel-preset-react-app/dependencies 这个包，我们找到这个包对应的js文件，然后去看它的babel相关配置，如下：

发现是没有forceAllTransforms这项配置的，并且问题出现在刚才安装的两个依赖包中，所以单独再增加一项配置
如果你也是create-react-app创建的项目，下面的代码直接复制到对应config目录下面的文件

// config/paths.js
/** 补充多余的需要二次babel的包 */extraBabelInclude: [resolveApp('node_modules/highlight.js/lib/'),resolveApp('node_modules/groq-sdk/'),resolveApp('node_modules/marked/lib/'),],// config/webpack.config.js
// 只需要生产环境即可
isEnvProduction && {test: /\.(js|mjs)$/,include: paths.extraBabelInclude,loader: require.resolve('babel-loader'),options: {presets: [[require('@babel/preset-env').default,{forceAllTransforms: true}]]}},

书写的位置，就放于
上面，loader默认顺序是从上到下执行的。我们可以先让默认配置执行之后，再去处理我们特殊loader的配置即可。

如果不是通过create-react-app创建的项目，那就按照webpack默认的配置规则，加上forceAllTransforms

写在最后

被这个问题困了一天，说到底还是不熟悉babel的转义配置呀！
如果看到这里，并且帮到我的小伙伴的，就给博主点个赞吧！