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

【问题标题】：Webpack 2 and Angular 1: exporting and import modulesWebpack 2 和 Angular 1：导出和导入模块
【发布时间】：2017-10-01 21:31:54
【问题描述】：

希望能够澄清为什么以下内容无法按预期工作，希望这是我可能忽略的简单事情。如果没有 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

【问题讨论】：

在第二个 sn-p 你有 require('./root.component') 。一开始你没有。这是显而易见的问题。
@estus，所以没有办法以第一种方式注册和要求模块？
什么意思？如果要执行其内容，则需要 require 该文件。如果你不require它，它就不会被执行，这个很简单。如果幕后确实没有require('./root.component')，则需要添加此行。
@estus 如果您想回答问题以表明您的意思，我想将赏金奖励给某人。
我不确定这是否是您遇到的问题，但如果确实如此，那就很简单了。虽然更好的方法是不依赖单个 root 模块，如答案中所述。为文件和模块找出正确的命名约定需要一些时间，但最终它得到了回报，并产生了设计良好的可维护模块化应用程序。

标签： javascript angularjs webpack angular-ui-router

【解决方案1】：

应该导入一个文件（或者更准确地说，required，因为应用程序依赖于 CommonJS 模块）才能执行它。

在第一个 sn-p 中，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 模块。在这种情况下，需要文件的顺序无关紧要。从包含 Angular 模块的文件中导出和导入模块的 name 属性是常规的：

//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;

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

【讨论】：

【解决方案2】：

只是想与您分享我的方法。我已经用了很长时间了，而且效果很好。

// src/components/foo/foo.component.js

import './foo.scss';

export class FooComponent {
    static NAME    = 'foo';
    static OPTIONS = {
        controller: FooComponent,
        template  : require('./foo.template.html'),
        bindings  : {},
    };

    constructor(FooService) {
        'ngInject';
        this._FooService = FooService;
    }

    $onInit() { /* ... */ }
    $onDestroy() { /* ... */ }
    /* ... */
}

// src/components/foo/foo.service.js

export class FooService {
    /* ... */
}


// src/components/foo/index.js

import { FooComponent } from './foo.component';
import { FooService } from './foo.service';

export const FOO_COMPONENT = angular.module('components.foo', [])
    .service('FooService', FooService)        
    .component(FooComponent.NAME, FooComponent.OPTIONS)
    .name;


// src/components/index.js

export { FOO_COMPONENT } from './foo';
export { BAR_COMPONENT } from './bar';
/* ... */


// src/app/users/index.js
import { CORE } from 'shared/core';

import { 
    FOO_COMPONENT,
    BAR_COMPONENT,
} from 'components';

import { USERS_LIST_COMPONENT } from './users-list';
import { USER_PROFILE_COMPONENT } from './user-profile';

/* ... */

export const USERS_MODULE = angular
    .module('app.users', [
        CORE,
        FOO_COMPONENT,
        BAR_COMPONENT,
        USERS_LIST_COMPONENT,
        USER_PROFILE_COMPONENT,
    ])
    .name


// src/app/index.js
import { USERS_MODULE } from './users';
import { PRODUCTS_MODULE } from './users';

import { AppComponent } from './app.component';

export const APP_MODULE = angular
    .module('app', [
        USERS_MODULE,
        PRODUCTS_MODULE,
    ])
    .component(AppComponent.NAME, AppComponent.OPTIONS)
    .name;

【讨论】：