jwt - 如何在 Wepack 5 中为 jsonwebtoken 填充缓冲区

Question

我正在升级到 Webpack 5，我对需要 Buffer的包 jsonwebtoken ( https://github.com/auth0/node-jsonwebtoken ) 有疑问（在https://github.com/auth0/node-jsonwebtoken/blob /master/sign.js#L91）由于 nodejs 函数不包含 Webpack 5 polyfill，并且我尝试使用signjsonwebtoken 中的函数，因此会引发以下错误：

message: "Buffer is not defined"
stack: "ReferenceError: Buffer is not defined↵    
at module.exports (webpack-internal:///./node_modules/jsonwebtoken/sign.js:91:26)↵ 

为了解决我安装https://github.com/feross/buffer的问题

npm install buffer

在我的 webpack 配置中我添加了

 resolve: {
    fallback: {
      "Buffer": require.resolve('buffer/'),
    }

或者

 resolve: {
    fallback: {
      "buffer": require.resolve('buffer/'),
    }

我也试过

 resolve: {
    fallback: {
      "buffer": require.resolve('buffer/').Buffer,
    }

但是最后一个会产生一个 Webpack 模式错误：

 configuration.resolve.fallback['Buffer'] should be one of these:
      [non-empty string, ...] | false | non-empty string
      -> New request.
      Details:
       * configuration.resolve.fallback['Buffer'] should be an array:
         [non-empty string, ...]
         -> Multiple alternative requests.
       * configuration.resolve.fallback['Buffer'] should be false.
         -> Ignore request (replace with empty module).
       * configuration.resolve.fallback['Buffer'] should be a non-empty string.
         -> New request.
    at validate (/home/ant1/packcity/front-pmd/node_modules/webpack/node_modules/schema-utils/dist/validate.js:104:11)

尽管我进行了试验，但它无法正常工作并且错误仍然存​​在。

有人在与 Webpack 捆绑的应用程序中成功添加了 Buffer 的 polyfill 吗？任何帮助将非常感激。

Answer 1

我在与 Gatsby 有类似问题时发现了这个问题。为了解决这个问题，我添加了：

exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
        plugins: [
            new webpack.ProvidePlugin({
                Buffer: [require.resolve("buffer/"), "Buffer"],
            }),
        ]
    }
}

到我的gatsby-node.js配置。

Answer 2

我刚刚通过添加解决了我的问题

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

正如这里所建议的那样https://github.com/ipfs/js-ipfs/issues/3369#issuecomment-721975183

Answer 3

我在盖茨比中以这种方式解决了它。我不必安装buffer依赖项。刚刚将此添加到我的gatsby-node.js文件中。

exports.onCreateWebpackConfig = ({ actions, stage, plugins }) => {
    if (stage === 'build-javascript' || stage === 'develop') {
        actions.setWebpackConfig({
            plugins: [plugins.provide({ Buffer: ['buffer/', 'Buffer'] })]
        });
    }
};