Webpack 2和Angular 1:导出和导入模块
问题描述:
希望得到一些澄清为什么以下不能按预期工作,希望,这可能是我可能忽略的东西。没有Webpack,当前的实现按预期工作。Webpack 2和Angular 1:导出和导入模块
理想情况下,想保持当前的实现,我觉得注册组件/控制器/ 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
答
的文件应该被导入(或更精确地,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;
这个食谱可以保持高度的模块化单元排列整齐的深层次结构。这对代码重用和测试非常有用。
答
只是想与你分享我的方法。我已经使用了它一段时间了,它的工作原理非常完美。
// 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;
在第二个片段中,您需要('./ root.component')。首先你不会。这是显而易见的问题。 – estus
@estus,所以没有办法注册并要求模块的第一种方式? – alphapilgrim
你是什么意思?如果您希望执行其内容,则需要“要求”该文件。如果你不'需要'它,它不会被执行,这是非常简单的。如果在幕后确实没有'require('./ root.component')',则需要添加此行。 – estus