Webpack 2 和 Angular 1:导出和导入模块 [英] Webpack 2 and Angular 1: exporting and import modules

问题描述

希望得到一些关于为什么以下不能按预期工作的澄清，希望这很容易被我忽略.如果没有 Webpack，当前实现将按预期工作.

Hope to get some clarification on why the following doesn't work as expected, hopefully, it's something easy I may have overlooked. Without Webpack the current implementation works as expected.

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

Ideally, would like to keep current implementation, I feel registering the component/controller/etc should be done in its own file and just point to the relative module. But if this isn't best practice I'd also like to see another suggestion.

文件 root.module 是我定义根模块的地方，然后在 root.component 文件中我将组件添加到该模块.

File root.module is where I define the root module and then in the root.component file I tack on the component to that module.

不导入模块的当前实现:

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

推荐答案

应该导入一个文件(或者更准确地说，required，因为应用程序依赖于 CommonJS 模块)以便它被执行.

A file should be imported (or more precisely, required, because the application relies on CommonJS modules) in order for it to be executed.

在第一个片段 root.module.js 中不包含 require('./root.component')，所以 root.component.js 永远不会被执行.

In the first snippet root.module.js doesn't contain require('./root.component'), so root.component.js is never executed.

应该是

//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错误.

Notice that root.component.js should be required after root module was defined, doing these in opposite order will result in $injector:modulerr error.

消除竞争条件和利用模块化的行之有效的方法是每个文件有一个 Angular 模块.在这种情况下，需要文件的顺序无关紧要.通常从包含 Angular 模块的文件中导出和导入模块的 name 属性:

The proven way to eliminate race conditions and utilize modularity is to have one Angular module per one file. In this case it doesn't matter in which order the files are required. It is conventional to export and import module's name property from files that contain Angular modules:

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

这个配方允许维护高度模块化单元的精心安排的深层层次结构.这有利于代码重用和测试.

This recipe allows to maintain well-arranged deep hierarchy of highly modular units. This is beneficial for code reusing and testing.

这篇关于Webpack 2 和 Angular 1:导出和导入模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！