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;