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이 모듈은 정의 된 후 root.component.js가 $injector:modulerr 오류가 발생할 것이다 역순이 하 요구되어야한다는

가

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

require('./root.component'); 

주의해야한다.

경쟁 조건을 제거하고 모듈성을 사용하는 입증 된 방법은 하나의 파일 당 하나의 각도 모듈을 갖는 것입니다. 이 경우 파일 순서가 중요하지 않습니다. 이 각도 모듈을 포함하는 파일에서 가져올 모듈의 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;