Webpack升级到5的一系列坑

工程中的依赖webpack升级到5以后，遇到了一系列的报错，可能是webpack引起的，也可能是项目中的依赖导致的，问题如下：

 

（1）Buffer is not defined

这个问题代码出在mqtt-packet这个依赖包中，查看github代码，该依赖包的工程根目录下：constants.js有一段代码：

protocol.SESSIONPRESENT_HEADER = Buffer.from([protocol.SESSIONPRESENT_MASK])

其中Buffer找不到定义了。

网上查询了一些资料，有说要引入buffer这个依赖的，于是加入这个依赖，但是问题依旧，猜测是因为虽然加入了依赖，但没有引入的原因。

但是如何引入呢，毕竟mqtt-packet是第三方包?

想到了webpack的ProvidePlugin这个组件，于是在webpack设置中添加了：

new webpack.ProvidePlugin({

Buffer: ['buffer', 'Buffer']})

问题解决

 

(2)Cannot read property 'slice' of undefined

代码问题出在依赖readable-stream，看了一下代码，该依赖代码目录lib/_stream_writable.js有一段代码：

var asyncWrite = !process.browser && ['v0.10', 'v0.9.'].indexOf(process.version.slice(0, 5)) > -1 ? setImmediate : pna.nextTick;

在console中打印了一下process.version，这个没有值了，打印proccess以后，只有env属性，怀疑是proceess有问题了，结合

https://stackoverflow.com/questions/62275596/undefined-is-not-an-object-evaluating-process-version-split-in-react-native 这个帖子的问题

判断是process依赖出现了问题，项目中 运行yarn list --pattern process，发现process是最新的版本，

于是在webpack设置中，添加了：

new webpack.ProvidePlugin( {process:'process'})

问题解决。

 

总结：两个问题都是用webpack的ProvidePlugin解决了，ProvidePlugin主要用来全局的引入第三方依赖，这样能解决第三方库所依赖的第三方库有缺失的问题，另外对于项目中的

一些必要的依赖，也可以通过这种方式全局引入，牢记它的这两个应用场景，有利于我们灵活解决实际中碰到的一些依赖问题，赞一下这个插件！