返回

困扰我多日的打包问题终于解决了！

前端

大家好，我是前端开发工程师小明。今天，我想跟大家分享一下我最近遇到的一个打包问题。希望这篇文章能帮助更多前端开发者在开发过程中避免类似问题。

问题复现

前几天，有个人跟我反馈说，她fork了我右键菜单那个开源项目，一直无法打包成功。我寻思着应该不可能吧，当我尝试打包时，果然翻车了🤡。

$ npm run build

ERROR in ./node_modules/react-icons/lib/fa/index.js 16:0-40
Module not found: Error: Can't resolve '@fortawesome/free-solid-svg-icons' in '/xxx/xxx/xxx/node_modules/react-icons/lib/fa'

问题定位

一开始，我还以为是这个项目本身出了问题。但是，当我查看项目的依赖关系时，发现并没有什么问题。

$ npm ls react-icons

react-icons@4.3.0
├── @fortawesome/fontawesome-common-types@^1.2.2
├── @fortawesome/free-regular-svg-icons@^5.15.4
├── @fortawesome/free-solid-svg-icons@^5.15.4
├── @fortawesome/react-fontawesome@^0.2.0
├── prop-types@^15.7.2

所有的依赖项都安装好了，为什么还会报错呢？

我仔细研究了一下webpack的配置文件，发现了一个奇怪的地方。在resolve.alias字段中，有一个这样的配置：

'@fortawesome/fontawesome-svg-core': '@fortawesome/free-solid-svg-icons',

这个配置的意思是，当代码中引用@fortawesome/fontawesome-svg-core时，webpack会自动替换成@fortawesome/free-solid-svg-icons。

我猜想，这个配置可能就是问题的根源。于是我注释掉这个配置，重新打包。果然，这次打包成功了！

解决办法

现在，我们已经知道了问题的根源，接下来就是解决问题了。

要解决这个问题，我们需要做两件事：

  1. 在项目中安装@fortawesome/fontawesome-svg-core。
  2. 将resolve.alias字段中的'@fortawesome/fontawesome-svg-core': '@fortawesome/free-solid-svg-icons'配置注释掉。
$ npm install @fortawesome/fontawesome-svg-core

// webpack.config.js
resolve: {
  alias: {
    // '@fortawesome/fontawesome-svg-core': '@fortawesome/free-solid-svg-icons',
  },
},

重新打包，这次终于成功了！

总结

这就是我最近遇到的一个打包问题，希望这篇文章能帮助更多前端开发者在开发过程中避免类似问题。

最后，我想说的是，在开发过程中遇到问题是难免的。重要的是，我们要学会如何定位问题和解决问题。只有这样，才能成为一名优秀的开发者。