[F2016061802] NodeJS之旅-使用webpack构建项目时代码正确但编译出错

Posted 2020-07-26

遇到这个问题前，我对webpack还不算太熟，仅仅限于用它来编译ES6代码，代码写多了，问题也就来了。

---

 

一开始用NodeJS写些小项目，用的模块并不多，遇到些报错问题，改改也就通过了。然而，随着用的第三方模块增多，用webpack构建项目时出现错误的次数越来越多，最奇怪的是：代码检查了十几遍，明明任何错误都没有，编译却通不过。最后只能硬着头皮去看编译后的代码才明白问题出在哪里！

---

 

对于webpack，它是自动把依赖都输出到目标文件中。比如：

import koa from ‘koa‘

构建后的输出文件有几千行，全部是koa的源码。这不是我们想看的，因为koa只能在Node环境下运行，只要直接在目标文件中require(‘koa‘)就可以了，没必要全部输出到目标文件中。同理，很多第三方模块只能运行在Node环境下，也没必要输出到目标文件中。

---

 

这种把依赖都输出到目标文件中的行为，在编译时很容易引起错误。可能某个模块依赖另一个可选的模块，但这个可选的模块没有被安装，那么编译就可能通不过，因为找不到某些函数的定义，所以，如果在确保代码无错的前提下，我们可以把一些第三方模块排除在webpack的构建过程之外，让构建过程不要把第三方模块的代码输出到目标文件，这样能减少构建出错的概率。

---

 

如何排除呢？可以在webpack配置文件中加入：

externals: [‘koa‘]

便可以把koa以require(‘koa‘)的形式输出到目标文件中，而不是输出koa所有的源码。

然而，有些是不用指定排除哪些模块的，我们可以在webpack配置中指定目标：

target: ‘electron‘

这样便可以排除构建electron应用相关的模块，而不用指定externals了。

---

 

更多具体使用方法可以参考webpack官网。