webpack - ./node_modules/stream-browserify/node_modules/readable-stream/lib/internal/streams/stream-browser.js 错误 : Can't resolve 'events'

Question

我有一个大型主干/requirejs 应用程序，我想迁移到 webpack，最新的“webpack”:“^4.27.1”，但我遇到了一个我无法解决的错误。

我一直在阅读 https://webpack.js.org/concepts/文档并看到了 Dodss 的这段视频 - https://www.youtube.com/watch?v=a96r7Tjf0Ps

我当前的 webpack.config.js 文件如下所示:

var path = require('path');
module.exports = {
    mode: 'development',
    context: path.resolve(__dirname),
    entry: {
        main: './public/assets/js/main',
        base: './public/assets/js/base'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    resolve: {
        alias: { 
            '/libs': './libs',
            'events': path.resolve(__dirname, 'public/assets/js/events'), 
            'views': path.resolve(__dirname, 'public/assets/js/views'),
            'models': path.resolve(__dirname, 'public/assets/js/models'),
            'collections': path.resolve(__dirname, 'public/assets/js/collections'),
            'templates': path.resolve(__dirname, 'public/assets/templates'),
            'jquery': path.resolve(__dirname, 'public/assets/js/libs/jquery/jquery'),
            'raven': path.resolve(__dirname, 'public/assets/js/libs/raven/raven'),
            'backbone': path.resolve(__dirname, 'public/assets/js/libs/backbone/backbone'),
            'daterangepicker': path.resolve(__dirname, 'public/assets/js/libs/daterangepicker/daterangepicker'),
            'highchart': path.resolve(__dirname, 'public/assets/js/libs/highchart/highcharts'),
            'intlTelInput': path.resolve(__dirname, 'public/assets/js/libs/intltelinput/intlTelInput'),
            'mask': path.resolve(__dirname, 'public/assets/js/libs/inputmask/inputmask'),
            'momentTimeZone': path.resolve(__dirname, 'public/assets/js/libs/moment-timezone/moment-timezone-with-data-2010-2020'),
            'socket': path.resolve(__dirname, 'public/assets/js/libs/socket.io-client/socket'),
            'kTranslate': path.resolve(__dirname, 'public/assets/js/utils/kTranslate'),
            'detectizr': path.resolve(__dirname, 'public/assets/js/libs/detectizr/detectizr'),
            'sjcl': path.resolve(__dirname, 'public/assets/js/libs/sjcl/sjcl'),
            'authRouter': './authRouter',
            'client': './client',
            'router': './router',
            'auth': './auth',
        }
    }
}

当我运行 webpack --display-error-details 时，项目中的许多文件似乎都可以打包，但我收到有关 node_modules 的错误:

ERROR in ./node_modules/stream-browserify/node_modules/readable-stream/lib/internal/streams/stream-browser.js
Module not found: Error: Can't resolve 'events' in '/path/to/project/node_modules/stream-browserify/node_modules/readable-stream/lib/internal/streams'
resolve 'events' in '/path/to/project/node_modules/stream-browserify/node_modules/readable-stream/lib/internal/streams'
  Parsed request is a module
  using description file: /path/to/project/node_modules/stream-browserify/node_modules/readable-stream/package.json (relative path: ./lib/internal/streams)
    aliased with mapping 'events': '/path/to/project/public/assets/js/events' to '/path/to/project/public/assets/js/events'
      using description file: /path/to/project/node_modules/stream-browserify/node_modules/readable-stream/package.json (relative path: ./lib/internal/streams)
        using description file: /path/to/project/package.json (relative path: ./public/assets/js/events)
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            /path/to/project/public/assets/js/events is not a file
          .wasm
            Field 'browser' doesn't contain a valid alias configuration
            /path/to/project/public/assets/js/events.wasm doesn't exist
          .mjs
            Field 'browser' doesn't contain a valid alias configuration
            /path/to/project/public/assets/js/events.mjs doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            /path/to/project/public/assets/js/events.js doesn't exist
          .json
            Field 'browser' doesn't contain a valid alias configuration
            /path/to/project/public/assets/js/events.json doesn't exist
          as directory
            existing directory
              using path: /path/to/project/public/assets/js/events/index
                using description file: /path/to/project/package.json (relative path: ./public/assets/js/events/index)
                  no extension
                    Field 'browser' doesn't contain a valid alias configuration
                    /path/to/project/public/assets/js/events/index doesn't exist
                  .wasm
                    Field 'browser' doesn't contain a valid alias configuration
                    /path/to/project/public/assets/js/events/index.wasm doesn't exist
                  .mjs
                    Field 'browser' doesn't contain a valid alias configuration
                    /path/to/project/public/assets/js/events/index.mjs doesn't exist
                  .js
                    Field 'browser' doesn't contain a valid alias configuration
                    /path/to/project/public/assets/js/events/index.js doesn't exist
                  .json
                    Field 'browser' doesn't contain a valid alias configuration
                    /path/to/project/public/assets/js/events/index.json doesn't exist
[/path/to/project/public/assets/js/events]
[/path/to/project/public/assets/js/events.wasm]
[/path/to/project/public/assets/js/events.mjs]
[/path/to/project/public/assets/js/events.js]
[/path/to/project/public/assets/js/events.json]
[/path/to/project/public/assets/js/events/index]
[/path/to/project/public/assets/js/events/index.wasm]
[/path/to/project/public/assets/js/events/index.mjs]
[/path/to/project/public/assets/js/events/index.js]
[/path/to/project/public/assets/js/events/index.json]
 @ ./node_modules/stream-browserify/node_modules/readable-stream/lib/internal/streams/stream-browser.js 1:17-34
 @ ./node_modules/stream-browserify/node_modules/readable-stream/lib/_stream_writable.js
 @ ./node_modules/stream-browserify/node_modules/readable-stream/writable-browser.js
 @ ./node_modules/stream-browserify/index.js
 @ ./node_modules/browserify-sign/browser/index.js
 @ ./node_modules/crypto-browserify/index.js
 @ ./public/assets/js/libs/sjcl/sjcl.js
 @ ./public/assets/js/views/auth.view.js
 @ ./public/assets/js/authRouter.js
 @ ./public/assets/js/auth.js
 @ ./public/assets/js/base.js

我的项目架构是这样的:

app
-/public
  /assets
  /img
  /js
      /collections
      /views
      /events
      /models
      ...
-/dist
-/node_modules
...

我试图删除所有 node_modules 并重新安装，但那没有用:

rm -rf node_modules
npm i

Answer 1

如果这对任何人都有帮助，则问题与范围有关。如果您在我的 webpack.config.js 文件中看到，我包含了以下行:

'事件': path.resolve(__dirname, 'public/assets/js/events'),

这是 Backbone 的自定义事件文件。但是，在我的 /node_modules 中我还有一个 events 模块，所以错误基本上是说 stream-browser.js 中存在问题>，因为 events 无法使用我的配置设置解析，它指向我的自定义事件。

为了解决这个问题，我将主干 events 文件夹重命名为 backbone-events ，然后编辑那些受影响的文件。