陕西网站备案查询,姓名域名,一流专业建设方案,网站制作在哪找前言
最近在公司的一个项目中使用到了Webpack5#xff0c; 然而在使用某个npm包的时候#xff0c;出现了Buffer is not defined 这个问题#xff0c;原因很明显了#xff0c;因为浏览器运行时没有Buffer这个API#xff0c;所以需要为浏览器引入Buffer Polyfill. Webpack5…前言
最近在公司的一个项目中使用到了Webpack5 然而在使用某个npm包的时候出现了Buffer is not defined 这个问题原因很明显了因为浏览器运行时没有Buffer这个API所以需要为浏览器引入Buffer Polyfill. Webpack5
这种在Webpack项目下使用NodeJS包的场景应该是很常见的为什么之前没有遇到过这个问题。因为Webpack5之前的版本Webpack会自动为我们引入NodeJS API Polyfill, 然而Webpack5之后官方认为自动引入Polyfill会导致bundle体积过大并且大多数情况下这些自动引入的Polyfill是没有用到的。所以Webpack5需要我们手动引入Polyfill
配置Webpack5
安装Buffer Polyfill
我们需要先安装兼容浏览器环境的Buffer实现。这里使用的是buffer这个npm包
npm install -D buffer 配置 Fallback
Webpack resolve.fallback指定了当我们的目标构建环境中不存在对应的包时将使用fallback的值作为回退。这里我们使用安装的buffer包作为fallback
{resolve: {fallback: {buffer: require.resolve(buffer/),},},
} 这里使用了’buffer/, 这样可以明确告诉NodeJS模块查询算法使用buffer npm包而不是NodeJS自带的buffer模块
配置ProvidePlugin
Webpack ProvidePlugin可以注入一个模块或者值作为全局变量。我们之后可以直接使用被注入的全局变量无需import/require
{plugins: [new webpack.ProvidePlugin({Buffer: [buffer, Buffer], // [包名, 包中的值]})]
} 上面的配置相当于
const Buffer require(buffer).Buffer; 完整配置 {resolve: {fallback: {buffer: require.resolve(buffer/),},},plugins: [new webpack.ProvidePlugin({Buffer: [buffer, Buffer],})]
} package.json browser字段
经过上面的配置正常情况下就可以解决Buffer is not defined 这个问题了。然而我使用的公司内部的某个npm包却报出了新的问题Cannot read properties of undefined(reading allocUnsafe) , 其它依赖buffer的包则一切正常。 经过排查和这个包的package.json browser字段有关。
// package.json
{browser: {buffer: false}
} 按照非npm官方规范github.com/defunctzomb…browser可以有三种用途
1.main字段的替代。npm官方文档中介绍的用途值为string类型用于指定浏览器环境的包入口browser: ./browser/specific/main.js 2.替代指定文件。左侧为你需要替换的模块或文件名称右侧为替换项browser: {module-a: ./shims/module-a.js,./server/only.js: ./shims/client-only.js} 3.忽略模块。设置false可以阻止模块或文件被打包到包中browser: {module-a: false} 以上配置会导致a为undefinedconst a require(module-a); 解决方法也很简单让包的维护者把package.json中的browser字段删除即可。至此所有报错全部解决可以愉快地使用Buffer API了
结语
Webpack5不再自动为我们引入NodeJS Polyfill, 我们可以安装兼容浏览器环境的npm包然后通过配置resolve.fallback以及providePlugin插件来手动引入如果配置完成后某些包还是有问题可以尝试检查对应包中的package.json browser字段
最后
整理了75个JS高频面试题并给出了答案和解析基本上可以保证你能应付面试官关于JS的提问。 有需要的小伙伴可以点击下方卡片领取无偿分享
