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

Question

希望得到一些澄清为什么以下不能按预期工作，希望，这可能是我可能忽略的东西。没有Webpack，当前的实现按预期工作。

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

文件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模块被定义后root.component.js应当要求，在相反的顺序将导致错误$injector:modulerr做这些。

消除竞态条件和利用模块化的经过验证的方法是每个文件都有一个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; 

这个食谱可以保持高度的模块化单元排列整齐的深层次结构。这对代码重用和测试非常有用。

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