Question

我将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'
      ]
    }
};

源代码片段：

myapp / app / app.js https://gist.github.com/sergibondarenko/a87578e774ca43f4fc8a105fa163e13c
myapp / app / main.js https://gist.github.com/sergibondarenko/9ea25e6ac4f57a7f2703e053efe48ca
myapp / app / controllers / loginController.js https://gist.github.com/sergibondarenko/7c5df871c96f4e9919900f8f87d53a8b

---更新

我将代码转换为ES6。

MyApp的/应用/ app.js https://gist.github.com/sergibondarenko/73aa1ba06250c1d347bc44c7b9361c79
MyApp的/应用/ main.js https://gist.github.com/sergibondarenko/ac290eb35f633337edd6ec8d15ccd13b
MyApp的/应用/控制器/ loginController.js https://gist.github.com/sergibondarenko/9c995b4cab2de5d48905bac51c929155

现在我有以下错误：

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

Answer 1

Webpack无法导入模块services/routeResolver，该模块在app.js AMD模块中定义为依赖项。

您可以尝试使用从AMD到ES6的自动转换器，例如https://github.com/jonbretman/amd-to-as6或此https://github.com/buxlabs/amd-to-es6

找不到模块：错误：无法解决＆＃39;导出＆＃39;

1 个答案: