生产打包报错问题处理

环境：

fixed-data-table-2：V1.2.17

antd：V 3.6.6

react：V16.12.0

react-dom：V16.12.0

redux：V4.0.5

webpack：V3.12.0

背景：

这是一个很古老的项目，项目的打包配置内容多而繁杂，组件库、引擎库（JSON转化成组件）、工具方法库等都合在项目里面，项目的功能也很多，之前的react版本也比较低，后面做了一次升级，支持了hook写法，目前JSON和function组件混合存在，项目中存在一些难以解决的问题。

最近项目需要增加新的功能，于是开始磕磕绊绊的开发，开发过程中遇到antd的Table组件设置scroll后错位，在官网找到了对应的issues，链接如下

https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241

查看了里面的方法，并没有解决，于是使用fixed-data-table-2进行二次封装成组件进行使用。

问题：

本地开发运行没有问题，生产打包运行报错

Uncaught SyntaxError: Unexpected token ';'

分析：

尝试1

首先要知道报错的信息是什么：未捕获语法错误：意外的标记“；”

查找项目里面是否出现了;错误，把一些没有添加分号的代码也添加了分号，结果还是出现问题

尝试2

以前开发时候遇到useEffect使用async/await产生报错，所以这次看看有没有出现这种问题，全局搜索查看，并没有发现有这种错误

// 错误的
useEffect(async()=>{
	await promiseFn()
},[])

// 正确的
useEffect(()=>{
	const fn=async ()=>{
		await promiseFn()
	}
	fn()
},[])

尝试3

切换到开发之前的分支进行打包查看，查看是否存在相同问题。尝试之后发现之前的版本并不会出现问题，因此可以判断是新代码的问题。

新代码还是比较多的，包含四个页面和一个新封装Table组件，首先进行的是把四个页面的代码注释掉，结果还是有问题；那么只剩下新封装Table组件，这次把fixed-data-table-2封装的Table组件注释掉，发现问题没有出现，现在问题缩小到新封装Table组件

尝试4

由于是生产打包才出现问题，因此想到尝试修改生产打包配置来解决。

Table组件的相关代码放到了组件库文件夹中，组件库的打包和项目功能文件打包不一样，因此先把组件相关代码移动到项目中尝试，结果并不能解决。

接下来想着比较开发和生产打包配置的区别来寻找解决办法

• es3ify-webpack-plugin-v2用于将 es5 最终输出 es3 的 webpack 插件，如果项目需要兼容 ie8 会用到它，注释掉这个插件，结果并不能解决

• lodash-webpack-plugin去除未使用的lodash代码片段，注释掉这个插件，结果并不能解决

• webpack-parallel-uglify-plugin开启多个子进程执行代码压缩，提升构建速度，注释掉这个插件，结果并不能解决

• webpack-manifest-plugin生成一份资源清单的json文件，注释掉这个插件，结果并不能解决

• 一系列的插件注释并没有解决问题，现在准备对babel下手，目前规则里面配置

  {
    test: /\.js?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: "babel-loader",
        options: {
          cacheDirectory: true
        }
      }
    ]
  }
  

  先尝试注释掉cacheDirectory，结果并不能解决；注释掉exclude，结果并不能解决；增加include: "fixed-data-table-2"，结果并不能解决

很痛苦缩小了范围，一波尝试，一点用也没有

尝试5

打包的配置修改这条路算是被堵死了，现在尝试修改封装组件内的代码来尝试

• 使用没问题的组件代码替换新封装Table组件代码，结果发现，问题没有出现，问题确定是Table组件代码有问题
• 组件中包含hook代码，尝试去掉，结果并不能解决
• 把大部分二次封装代码注释掉，仅导出fixed-data-table-2最基本的功能组件，结果也不能解决

有点绝望了，不会是fixed-data-table-2源码有问题吧？要去看源码？

尝试6

先去官网查看一下对于react版本有没有要求，然后并没有发现问题。源码还是有好多的，劝退啊！先看看node_modules里面的fixed-data-table-2包，在包的package.json文件中看到"main": "main.js"，main.js文件中内容是module.exports = require('./internal/FixedDataTableRoot');。这个包为什么用的不是dist里面的代码呢？internal里面esModule实现模块化。尝试改成dist里面，fixed-data-table-2/dist/fixed-data-table，结果解决了

简直不敢相信！终于把这个坑爬过去了！！！

感悟：

遇到没有头绪的报错，需要使用排除法一点一点从大范围缩小到小范围，小范围内再进行一点一点的尝试，尝试次数多了总是可以发现问题的关键点。发现报错不要慌，其实很多报错的提示信息都是很具体的，根据报错信息和报错位置很容易就可以解决。