Question

我已经开始在相当大的代码库中使用webpack，并且已经使用ES6的import语句来加载每个模块所需的依赖项。

我的文件结构旨在基于组件，所有部分都特定于该组件文件夹中的组件。例如，组件文件本身，然后是模板，样式表，服务，过滤器等，也是特定于该组件的。然后，我们可能在该模块中有一个通用服务文件夹，用于不特定于特定组件的服务。例如：

- my-module
  - component-a
    - component_a.component.js
    - component_a.component.spec.js
    - component_a.html
    - component_a.scss
  - services
    - some_service.service.js
  main.module.js
  main.run.js
  main.config.js

我的问题是main.module.js文件变得无法维护，因为我手动将所有必需的依赖项导入到此文件中，然后根据需要将它们注册到角度世界中。例如：

import componentA from './component-a/component_a.component';
import someService from './services/some_service.service;

angular
  .module('myModule', [])
  .component('componentA', componentA)
  .service('someService', someService);

你可以想象当你有10多个组件时，它会是什么样子。我一直在努力为这个问题找到一个好的解决方案，有没有人有任何建议？这里有最佳实践方法吗？

Answer 1

我想，每个组件/控制器/服务等都可以在自己的文件中将自己连接到应用程序。

就像你有一个文件ome_service.service.js并在里面写下：

myApp.service('omeService', function(){
    var app = this;
    // service stuff
});

因此，注册不在您的main.module.js中，而是在每个文件本身中。但是，您需要将app变量公开为全局可用。使用像webpack这样的捆绑器，这很容易处理。 Gene Conroy-Jones写了一篇关于如何通过webpack实现这一目标的好文章：https://medium.com/@drgenejones/using-webpack-with-legacy-angular-spas-automating-imports-using-require-context-58e0e9cc6e9c

通过这种方法，每个新组件都可以自己处理注册，而中央应用程序不必携带所有这些进口。

AngularJs和Webpack - 如何导入服务，组件和模块

1 个答案: