AngularJS 模块与 CommonJS/ECMA6 模块答案

【问题标题】：AngularJS modules vs CommonJS/ECMA6 modulesAngularJS 模块与 CommonJS/ECMA6 模块
【发布时间】：2016-05-05 14:03:10
【问题描述】：

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

该项目被分割成单独的.js 文件，每个文件都以CommonJS 样式（require 和module.exports）或ECMA6 样式（imports 和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;
    });
}

【问题讨论】：

标签： javascript angularjs webpack commonjs

【解决方案1】：

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

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

Angular 组件（例如控制器）中的类继承对于 Angular DI 来说是丑陋的。当在应用程序范围内使用带有 IIFE 模块的类时，可能需要手动维护导出 - 这也是模块化系统的工作。

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

根据我的经验，JS 模块和 Angular 模块/DI 配合得很好。

【讨论】：