我有一个大型骨干/ 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
答案 0 :(得分:0)
万一这对任何人都有帮助,则问题与范围有关。如果您在我的webpack.config.js
文件中看到,则包括以下行:
'events': path.resolve(__dirname, 'public/assets/js/events'),
这是用于主干的自定义事件文件。但是,在我的/node_modules
中,我也有一个events
模块,因此错误基本上是说stream-browser.js
中存在问题,因为events
无法使用我的配置设置,它指向我的自定义事件。
为了解决此问题,我将主干events
文件夹重命名为backbone-events
,然后编辑了受影响的那些文件。