Webpack 2和Angular 1：导出和导入模块

Question

希望能弄清为什么以下内容无法按预期工作，希望这是我可能忽略的简单事情。如果没有Webpack，当前的实现将按预期工作。

理想情况下，想保持当前的实现，我觉得组件/控制器/等的注册应在其自己的文件中完成，并且仅指向相关模块。但是，如果这不是最佳做法，那么我也想看看另一个建议。

文件root.module是我定义根模块的位置，然后在root.component文件中，将组件附加到该模块上。

当前不导入模块的实现：

//root.component.js
'use strict';

var root = {
  template: require('./root.html')
};

module.exports = angular
  .module('root')
  .component('root', root);
'use strict';

//root.module.js
module.exports = angular
    .module('root', [
        require('./common').name,
        require('./components').name
    ]);

如果我做以下工作并按预期加载模块：

//root.component.js
'use strict';

var root = {
  template: require('./root.html')
};
module.exports = root;

//root.module.js
'use strict';

module.exports = angular
  .module('root', [
    require('./common').name,
    require('./components').name
  ])
  .component('root', require('./root.component'));

当前目录树：

├── ./src
│   ├── ./src/app
│   │   ├── ./src/app/app.less
│   │   ├── ./src/app/app.spec.js
│   │   ├── ./src/app/common
│   │   │   ├── ./src/app/common/app.component.js
│   │   │   ├── ./src/app/common/app.controller.js
│   │   │   ├── ./src/app/common/app.html
│   │   │   ├── ./src/app/common/footer
│   │   │   │   ├── ./src/app/common/footer/app-footer.component.js
│   │   │   │   ├── ./src/app/common/footer/app-footer.controller.js
│   │   │   │   ├── ./src/app/common/footer/app-footer.html
│   │   │   │   └── ./src/app/common/footer/index.js
│   │   │   ├── ./src/app/common/header
│   │   │   │   ├── ./src/app/common/header/app-nav.component.js
│   │   │   │   ├── ./src/app/common/header/app-nav.controller.js
│   │   │   │   ├── ./src/app/common/header/app-nav.html
│   │   │   │   └── ./src/app/common/header/index.js
│   │   │   ├── ./src/app/common/index.js
│   │   │   └── ./src/app/common/sideBar
│   │   │       ├── ./src/app/common/sideBar/app-sidebar.component.js
│   │   │       ├── ./src/app/common/sideBar/app-sidebar.controller.js
│   │   │       ├── ./src/app/common/sideBar/app-sidebar.html
│   │   │       └── ./src/app/common/sideBar/index.js
│   │   ├── ./src/app/components
│   │   │   ├── ./src/app/components/auth
│   │   │   │   ├── ./src/app/components/auth/auth-form
│   │   │   │   │   ├── ./src/app/components/auth/auth-form/auth-form.component.js
│   │   │   │   │   ├── ./src/app/components/auth/auth-form/auth-form.controller.js
│   │   │   │   │   ├── ./src/app/components/auth/auth-form/auth-form.html
│   │   │   │   │   └── ./src/app/components/auth/auth-form/index.js
│   │   │   │   ├── ./src/app/components/auth/auth.service.js
│   │   │   │   ├── ./src/app/components/auth/auth.user.js
│   │   │   │   ├── ./src/app/components/auth/index.js
│   │   │   │   ├── ./src/app/components/auth/login
│   │   │   │   │   ├── ./src/app/components/auth/login/index.js
│   │   │   │   │   ├── ./src/app/components/auth/login/login.component.js
│   │   │   │   │   ├── ./src/app/components/auth/login/login.controller.js
│   │   │   │   │   └── ./src/app/components/auth/login/login.html
│   │   │   │   └── ./src/app/components/auth/register
│   │   │   │       ├── ./src/app/components/auth/register/index.js
│   │   │   │       ├── ./src/app/components/auth/register/register.component.js
│   │   │   │       ├── ./src/app/components/auth/register/register.controller.js
│   │   │   │       └── ./src/app/components/auth/register/register.html
│   │   │   └── ./src/app/components/index.js
│   │   ├── ./src/app/root.component.js
│   │   ├── ./src/app/root.html
│   │   └── ./src/app/root.module.js
│   └── ./src/index.ejs
└── ./webpack.config.js

Answer 1

require为了执行该文件，应导入一个文件（或更准确地说，为d，因为该应用程序依赖于CommonJS模块）。

在第一个代码段root.module.js中不包含require('./root.component')，因此root.component.js从不执行。

它应该是

//root.module.js
module.exports = anglar
  .module('root', [
    require('./common').name,
    require('./components').name
  ])
  .component('root', require('./root.component'));

require('./root.component');

请注意，在定义模块root.component.js之后，这是必需的root，以相反的顺序执行将导致$injector:modulerr错误。

消除竞争条件并利用模块化的行之有效的方法是每个文件有一个Angular模块。在这种情况下，文件的顺序无关紧要。通常name从包含Angular模块的文件中导出和导入模块的属性：

//root.component.js
module.exports = angular.module('root.rootComponent', [])
  .component('root', {
    template: require('./root.html')
  })
  .name;

//root.module.js
var rootComponentModule = require('./root.component');
var commonModule = require('./common');
var componentsModule = require('./components');

module.exports = angular
    .module('root', [
        rootComponentModule,
        commonModule,
        componentsModule
    ])
    .name;

此配方可以维护高度模块化单元的排列良好的深层次结构。这对于代码重用和测试很有用。