将 Webpack 添加到现有的 Angular 应用程序

Question

我正在开发一个现有的（正在运行的）Angular 1.5.5 应用程序。它非常小，有一个控制器、一个指令和几个服务，所有这些都拆分为单独的文件。

我现在想迁移到 Webpack 并对应用程序进行最少数量的更改以支持它。我发现的很多 Webpack/Angular 演示都是关于从一开始就使用内置的 webpack 创建一个新的 Angular 应用程序，但我不想重建现有的应用程序，只需进行任何必要的更改以使用webpack 生成的包。它也使用普通的 JS，而我看到的大多数教程都是针对 ES6 的。

我已经安装并运行了 grunt-webpack，它正在创建 bundle.js 文件，我可以在包中看到它正在拉入 Angular、Angular-aria 和 Angular-animate（我的模块依赖项）

但是，当我运行该站点时，我看到了一个错误：

未捕获的类型错误：angular.module 不是函数

我的webpack任务如下：

module.exports = {
    dist: {
        entry: './Static/js/Ng/app.js',
        output: {
            path: './Static/dist/js',
            filename: 'bundle.js'
        }
    }
};

正如我所说，实际的 Webpack 捆绑似乎按预期工作，并创建了 bundle.js 文件。

主入口文件（app.js）如下：

(function () {
    'use strict';

    var angular = require('../vendor/angular.js');
    var ngAria = require('../vendor/angular-aria.js');
    var ngAnimate = require('../vendor/angular-animate.js');

    angular.module('app', [ngAria, ngAnimate]);
}());

如果我在此文件中注销 angular 变量，它只是一个空对象，即使我可以在包中看到 Angular 源代码。

我错过了什么？

Answer 1

您可能会通过本地 var angular 变量隐藏全局 angular 属性。试试这个：

(function () {

    'use strict';
    require('../vendor/angular.js');
    require('../vendor/angular-aria.js');
    require('../vendor/angular-animate.js');

    angular.module('app', [ngAria, ngAnimate]);
}());