AngularJS 个模块与 CommonJS/ECMA6 个模块

Question

我加入了一个正在进行的 Web 项目，该项目使用 Angular 1 编写的前端作为 MVC 框架，并使用 Webpack 作为构建系统，我感觉就像 MATRIX 2 中的 Neo 在一堆嵌套矩阵中。

该项目被拆分成单独的 .js 文件，每个文件都以 CommonJS 风格（require 和 module.exports）或 ECMA6 风格（import s 和 exports)。 Webpack 使用 Babel 将 ECMA6 转换为 ECMA5，并从中创建一个包。

在这些 CommonJS 模块中驻留 AngularJS 模块。生活在 CommonJS 中，Angular 使用 Angular 的 RequireJS-esque 模块系统完成它自己的依赖注入任务。

我感觉依赖管理的同一个工作做了两次。

当 Angular 被编写时，Angular 开发人员是否认为多模块 Angular 项目应该被简单地串联起来，例如与 grunt concat 成一个包并提供给客户端，其中 Angular $injector 负责依赖管理？那么，我们的 Webpack 构建只是在此基础上过于复杂了？

项目示例：

文件model.module.js:

import angular from "angular";

import {EntityViewController} from './entity_view_controller'

// @ngInject
function routes($stateProvider) {
    $stateProvider.state("modeller.entity.view", {
        url: "/:id/view",
        controller: EntityViewController,
        templateUrl: "/states/modeller/model/entity_view.html"
    });
}

export default angular.module("states.modeller.entity", [])
    .config(routes)
    .controller("EntityViewController", EntityViewController);

文件entity_view_controller.js:

"use strict"

export /* ngInject */ function EntityViewController($scope, $stateParams, EntityModel) {
    $scope.entity = {};
    $scope.attributes = [];
    EntityModel.get({id: $stateParams.id}, (data) => {
        $scope.entity = data.entity;
        $scope.attributes = data.attributes;
    });
}

Answer 1

确实 Angular 是 concat-friendly 并且不需要其他模块化解决方案。一些开发风格（特别是 JP）暗示使用 IIFE 来避免全局命名空间污染。可以手工编写 IIFE，也可以将此工作委托给 Webpack 或其他模块化系统。

模块化系统的使用引入了不适合纯 JS 的设计方案。

Class Angular 组件（例如控制器）中的继承对于 Angular DI 是丑陋的。当使用带有 IIFE 模块的类 app-wide 时，可能需要手动维护导出 - 同样，这是模块化系统的工作。

相当多的应用程序组件可以与框架无关，这扩展了架构决策（框架迁移、同构应用程序）的选项，并允许单元与框架分开测试。

JS 模块和 Angular modules/DI 根据我的经验可以很好地协同工作。

AngularJS 个模块与 CommonJS/ECMA6 个模块

AngularJS modules vs CommonJS/ECMA6 modules

javascript

commonjs

angularjs

webpack