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

Question

我正在升级到Webpack 5，我在jsonwebtoken (https://github.com/auth0/node-jsonwebtoken)包中遇到了一个问题，它需要缓冲区(在https://github.com/auth0/node-jsonwebtoken/blob/master/sign.js#L91)，因为对于nodejs函数，不包括Webpack 5多重填充，并且我尝试使用jsonwebtoken中的函数sign，它抛出以下错误：

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

我在Gatsby中用这种方法解决了这个问题。我不需要安装buffer依赖项。刚把这个添加到我的gatsby-node.js文件中。

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