希望得到一些澄清,说明为什么以下内容没有按预期工作,希望这是我可能忽略的容易的事情。如果没有 Webpack,当前的实现会按预期工作。
理想情况下,想要保持当前的实现,我觉得注册组件/ Controller /等应该在它自己的文件中完成,并且只指向相关模块。但是,如果这不是最佳做法,我还希望看到另一个建议。
文件 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.component.js
应该在 root
模块被定义之后被要求,以相反的顺序执行这些将导致 $injector:modulerr
错误。
消除竞争条件和利用模块化的行之有效的方法是每个文件都有一个 Angular 模块。在这种情况下,需要文件的顺序无关紧要。通常从包含 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;
此配方允许维护高度模块化单元的安排良好的深层层次结构。这有利于代码重用和测试。
关于javascript - Webpack 2 和 Angular 1 : exporting and import modules,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43770413/