javascript - 将 AMDClean 与 AngularJS 结合使用

Question

到目前为止我一直在使用Almond在我的应用程序的生产中加载 AMD 模块，但我想更进一步并使用 AMDClean .

该应用程序使用了 AngularJS 等库。 Grunt build设置与 Almond 完美配合，但是当我将 Grunt 配置切换为使用 AMDClean 时，应用程序无法加载，并且控制台显示以下错误:

Uncaught TypeError: Cannot read property 'module' of undefined 

指的是以下行:

return angular.module('lingua-web', ['ui.router']);

在上下文中:

app = function (angular) {
    return angular.module('lingua-web', ['ui.router']);
}(_angular_);

查看构建输出的其余部分，我可以看到在文件顶部声明的 _angular_ 变量，但与 jquery 和 下划线不同code> 也在那里声明，_angular_ 从未分配给。

从我的 Grunt 配置中提取

requirejs: {
    compile: {
        options: {
            baseUrl: "javascript",
            mainConfigFile: "javascript/config/requireConfig.js",
            include: ["miniApps/notebook"],
            insertRequire: ["miniApps/notebook"],
            out: "build/app.min.js",
            optimize: "none",
            skipModuleInsertion: true,
            onModuleBundleComplete: function (data) {

                var fs = require("fs");
                var amdclean = require("amdclean");
                var outputFile = data.path;

                fs.writeFileSync(outputFile, amdclean.clean({
                    filePath: outputFile
                }));
            }
        }
    }

我的 RequireJS 配置 (requireConfig.js)

var require = {
    shim: {
        angular: {
            exports: "angular"
        },
        underscore: {
            exports: "_"
        },
        jquery: {
            exports: "$"
        },
        "angular-ui-router": {
            exports: "uiRouter",
            deps: [
                "angular"
            ]
        },
        "jquery-ui": {
            deps: [
                "jquery"
            ]
        }
    },
    baseUrl: "/LinguaWeb/javascript",
    packages: [

    ],
    paths: {
        angular: "../dependencies/angular/angular",
        "angular-ui-router": "../dependencies/angular-ui-router/release/angular-ui-router",
        "iframe-resizer": "../dependencies/iframe-resizer/js/iframeResizer.min",
        jquery: "../dependencies/jquery/dist/jquery",
        "jquery-ui": "../dependencies/jquery-ui/ui/jquery-ui",
        requirejs: "../dependencies/requirejs/require",
        underscore: "../dependencies/underscore/underscore"
    }
};

有人有使用 AngularJS 与 RequireJS 和 AMDClean 的经验吗？谢谢。

Answer 1

您必须在 RequireJS 配置中设置 skipModuleInsertion: false，或者完全删除该配置选项，因为 false 是默认值。

https://github.com/gfranko/amdclean/issues/54#issuecomment-52392856