剩余参数运算符的babel转义配置

记一次生产构建的报错

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的转义配置呀！
如果看到这里，并且帮到我的小伙伴的，就给博主点个赞吧！

原文地址：https://blog.csdn.net/qq_36579455/article/details/142414206

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！