我将Angular 1.5应用程序从RquireJS 2.2迁移到Webpack 3.我想设置一个Webpack环境,它将支持当前的RequireJS代码并逐步转移到Webpack + ES6,逐步编写测试并重构源代码。
现在当我尝试通过webpack
命令生成一个包时,我收到以下错误:
user@host:~/dev/myapp$ webpack
Hash: 3ac8a9bb3d386514f8a6
Version: webpack 3.4.1
Time: 101ms
Asset Size Chunks Chunk Names
bundle.js 10.7 kB 0 [emitted] main
[0] ./app/bootstrap.js 82 bytes {0} [built]
[2] ./app/app.js 7.37 kB {0} [built]
+ 1 hidden module
ERROR in ./app/app.js
Module not found: Error: Can't resolve 'services/routeResolver' in '/home/trex/dev/myapp/app'
@ ./app/app.js 3:0-175:2
@ ./app/bootstrap.js
ERROR in ./node_modules/angular/index.js
Module not found: Error: Can't resolve 'exports' in '/home/trex/dev/myapp'
@ ./node_modules/angular/index.js 1:0-20
@ ./app/bootstrap.js
如何在我的情况下设置导出?
应用程序结构:
user@host:~/dev$ tree -L 1 myapp
theapp
├── app
├── css
├── font-awesome
├── fonts
├── img
├── index.html
├── lang
├── lib
├── node_modules
├── package.json
├── README.md
├── resources
├── scripts
├── share
├── templates
├── tests
└── widgets
某些库位于node_modules
,其他位于lib
文件夹中。所有库直接链接在index.html中:
<script type="application/javascript" src="lib/angular/angular.min.js" ></script>
Webpack配置:
user@host:~/dev$ cat myapp/webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: "./app/bootstrap.js",
output: {
path: __dirname + '/dist/',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" },
{ test: /[\/]angular\.js$/, loader: "exports?angular" }
]
},
resolve: {
alias: {},
extensions: ['.js', '.json'],
modules: [
'node_modules',
'lib'
]
}
};
源代码片段:
---更新
我将代码转换为ES6。
现在我有以下错误:
user@host:~/dev/myapp$ webpack
Hash: 673f49fc25bd759ea99d
Version: webpack 3.4.1
Time: 118ms
Asset Size Chunks Chunk Names
bundle.js 18.2 kB 0 [emitted] main
[1] ./app/bootstrap.js 78 bytes {0} [built]
[2] ./app/app.js 7.35 kB {0} [built]
[3] ./app/services/routeResolver.js 7.07 kB {0} [built]
+ 1 hidden module
ERROR in ./node_modules/angular/index.js
Module not found: Error: Can't resolve 'exports' in '/home/trex/dev/myspp'
@ ./node_modules/angular/index.js 1:0-20
@ ./app/bootstrap.js
答案 0 :(得分:1)
Webpack无法导入模块services/routeResolver
,该模块在app.js
AMD模块中定义为依赖项。
您可以尝试使用从AMD到ES6的自动转换器,例如https://github.com/jonbretman/amd-to-as6或此https://github.com/buxlabs/amd-to-es6