未找到模块：错误：无法解析'exports'

Question

我将Angular 1.5应用程序从RquireJS 2.2迁移到Webpack 3.我想设置一个Webpack环境，它将支持当前的RequireJS代码并逐渐转换到Webpack + ES6 ，一步一步，编写测试并重构源代码。

现在，当我尝试生成由webpack命令我碰到下面的错误捆绑：

[email protected]:~/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 

我如何可以设置我的情况下，出口？

应用结构：

[email protected]:~/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配置：

• MyApp的/应用/ app.js https://gist.github.com/sergibondarenko/a87578e774ca43f4fc8a105fa163e13c
• MyApp的：源代码的

  [email protected]:~/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' 
       ] 
      } 
  }; 
  

  件/app/main.js https://gist.github.com/sergibondarenko/9ea25e6ac4f57a7f2703e053efe48ca

• myapp/app/controllers/loginController.js https://gist.github.com/sergibondarenko/7c5df871c96f4e9919900f8f87d53a8b

--- UPDATE

我转换的代码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

现在我有以下错误：

[email protected]:~/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，该模块在您的AMD模块中定义为依赖关系。

你可以尝试使用自动转换器从AMD到ES6，这样https://github.com/jonbretman/amd-to-as6或本https://github.com/buxlabs/amd-to-es6