将 webpack 升级到版本 5 后出现运行时错误：缓冲区未定义

Question

迁移到 webpack version= 5 后，我收到运行时错误

缓冲区未定义。原因：函数名未知（文件名：118）

而构建部分则进展顺利。

Webpack 完成它的构建部分，但在我的项目中我也使用 sdk，其中 rollup 插件用于捆绑 javascript，将其捆绑到 file_name.esm.js 中，然后 webpack 将代码从 file_name.esm.js 捆绑到另一个单独的文件。

我可以看到使用汇总将 javascript 捆绑到单个文件中后，导致此错误发生的位置是声明“Buffer”变量的位置。将代码捆绑到 file_name.esm.js => 后如下所示

import { Buffer as Buffer$1 } from 'buffer';

同时我还可以看到“Buffer$1”别名也被用作 file_name.esm.js 中的变量，但还有一个代码也使用“Buffer”变量。所以，这就是为什么我认为发生了错误（即“缓冲区未定义”）。

但对于以前的 webpack 版本 (4)，这行代码工作正常，并且“Buffer”变量被正确引用，尽管像这样导入

import { Buffer as Buffer$1 } from 'buffer';

文件结构/位置=>“file_name.js”位置是“root/core/file_name.js”

我的 rollup.config 是 =>

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import filesize from 'rollup-plugin-filesize';
import json from 'rollup-plugin-json';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import {uglify} from 'rollup-plugin-uglify';
const path = require('path');

import pkg from './package.json';

const {
    FORMAT = 'cjs',
} = process.env;

const isModule = FORMAT === 'cjs' || FORMAT === 'esm';

const dest = {
    cjs: pkg.main,
    esm: pkg.module,
    iife: 'dist/abc.iife.min.js',
};

const config = {
    input: 'src/index.js',
    external: ['buffer'],
    output: {
        format: FORMAT,
        file: dest[FORMAT],
        indent: false,
        globals: {
            'buffer': 'buffer',
        },
    },
    plugins: [
        json(),
        babel({
            exclude: /node_modules\/(?!(root\/core)\/).*/,
            runtimeHelpers: true,
        }),
        replace({
            TOKEN_VERSION: JSON.stringify(pkg.version),
            TOKEN_MEMBER: JSON.stringify('js-user'),
        }),
        filesize(),
    ],
};

if (isModule) {
    config.plugins.push(resolve());
    config.external = id => [...Object.keys(pkg.dependencies), 'core-js', 'regenerator']
        .some(dep => dep !== 'root/core' && id.includes(dep));
} else {
    config.output.name = 'xyz';
    config.plugins.push(
        resolve({
            preferBuiltins: false,
            browser: true,
            customResolveOptions: {
                moduleDirectory: path.resolve(__dirname, 'node_modules'),
            },
        }),
        globals(),
        builtins(),
        commonjs(),
        uglify({
            warnings: false,
        }));
}

export default config;

我发现很难弄清楚这是 webpack 问题还是 rollup 问题，它应该是 webpack，因为我已经使用 webpack 版本 4 测试了相同的代码，它工作正常。有人可以建议我如何解决这个问题吗？

Answer 1

Webpack 4 用于填充 Node 全局变量，例如 Buffer。Webpack 5 删除了这些填充：https ://github.com/webpack/changelog-v5

要解决此问题，您要么不需要依赖 Buffer，要么使用像“buffer”这样的包来解决。

你可以配置 Webpack 来使用它，如下所示：

new webpack.ProvidePlugin({
  Buffer: ['buffer', 'Buffer'],
})