javascript - Webpack 2 y Angular 1: módulos de exportación e importación

webpack angularjs

Question

Espero obtener alguna aclaración sobre por qué lo siguiente no funciona como se esperaba, con suerte, es algo fácil que pude haber pasado por alto. Sin Webpack, la implementación actual funciona como se esperaba.

Idealmente, me gustaría mantener la implementación actual, siento que registrar el componente / controlador / etc. debe hacerse en su propio archivo y simplemente apuntar al módulo relativo. Pero si esto no es una buena práctica, también me gustaría ver otra sugerencia.

El archivo root.module es donde defino el módulo raíz y luego, en el archivo root.component, inserto el componente en ese módulo.

Implementación actual que no importa el módulo:

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

Si hago los siguientes trabajos y cargas el módulo como se esperaba:

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

Árbol de directorios actual:

├── ./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

Un archivo debe ser importado (o más precisamente, require d, porque la aplicación se basa en módulos CommonJS) para que se pueda ejecutar.

En el primer fragmento, root.module.js no contiene require(''./root.component'') , por lo que root.component.js nunca se ejecuta.

Debería ser

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

require(''./root.component'');

Observe que se debe requerir root.component.js después de root se haya definido el módulo root , hacer esto en orden opuesto resultará en $injector:modulerr error de $injector:modulerr .

La forma comprobada de eliminar las condiciones de carrera y utilizar la modularidad es tener un módulo angular por cada archivo. En este caso, no importa en qué orden se requieren los archivos. Es convencional exportar e importar propiedad de name de módulo desde archivos que contienen módulos angulares:

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

Esta receta permite mantener una jerarquía profunda bien organizada de unidades altamente modulares. Esto es beneficioso para la reutilización y la prueba del código.

Answer 2

solo quiero compartir mi enfoque contigo. Lo estoy usando desde hace bastante tiempo y funciona perfectamente.

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