记一次生产构建的报错
uncaught syntaxerror: unexpected token '...'
背景
在处理展示markdown文本功能,并且其中的代码高亮功能时,引入了两个第三发的依赖包marked
和 highlight.js
,本地功能调试正常之后,一如即往的没有build测试的习惯,所以直接退代码上线部署;
build上线之后,当在加载我的网站main.js时,控制台报错uncaught syntaxerror: unexpected token '...'
确定问题
当你点击跳转到浏览器开发者工具的 sources 这个选项卡,发现是 剩余参数运算符 浏览器不认识,一定是没有babel转义。
babel官网测试转义,发现需要开启此项配置forceAllTransforms
,就可以进行转义剩余参数运算符
解决问题
默认脚手架生成的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的转义配置呀!
如果看到这里,并且帮到我的小伙伴的,就给博主点个赞吧!