集成Twilio语音SDK遇webpack 5兼容错误，求解决方案

这不是Twilio的Bug，是webpack 5的行为变更导致的——webpack 5移除了默认的Node.js核心模块polyfill，而Twilio Voice SDK（包括旧版twilio-client和新版@twilio/voice-sdk）依赖了一些Node.js核心模块（比如http、https、url等），所以导入时会触发这个错误，完全可以自行修复。

下面是几种可行的修复方案：

方法1：用node-polyfill-webpack-plugin添加全局polyfill #

• 先安装插件：

  npm install node-polyfill-webpack-plugin --save-dev
  

• 在webpack配置文件中引入并启用插件：

  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
  
  module.exports = {
    // 你的其他webpack配置
    plugins: [
      new NodePolyfillPlugin()
    ]
  };
  

方法2：手动配置webpack的resolve.fallback按需添加polyfill #

如果不想全局引入所有polyfill，可以按需配置需要的模块：

module.exports = {
  // 你的其他webpack配置
  resolve: {
    fallback: {
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify"),
      "url": require.resolve("url/"),
      "stream": require.resolve("stream-browserify"),
      "util": require.resolve("util/"),
      "buffer": require.resolve("buffer/"),
      "assert": require.resolve("assert/")
    }
  },
  plugins: [
    // 若需要全局暴露Buffer和process变量，添加这个插件
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  ]
};

然后安装对应的polyfill依赖包：

npm install stream-http https-browserify url stream-browserify util buffer assert process --save-dev

方法3：改用Twilio的CDN版本替代npm包 #

如果项目允许使用CDN资源，可以直接在HTML中引入SDK，跳过webpack配置步骤：

<script src="https://sdk.twilio.com/js/voice/v2.0/twilio.min.js"></script>

之后在代码里直接使用全局的Twilio.Device即可，不需要写import语句。

内容的提问来源于stack exchange，提问作者nick