AngularJS 和 Webpack 集成

Posted

技术标签:

【中文标题】AngularJS 和 Webpack 集成【英文标题】:AngularJS and Webpack Integration 【发布时间】:2014-12-16 02:51:11 【问题描述】:

我正在为大型 AngularJS 应用程序使用 webpack 寻求帮助。我们使用基于功能的文件夹结构(每个功能/页面都有一个模块,它们有控制器、指令)。我已成功配置 webpack 以使其与 Grunt 一起使用,它会生成一个单独的包。我想创建块,因为它将成为一个大型应用程序,我们想异步加载模块(页面/功能)工件。

我正在浏览一些 webpack 示例以使用 'code splitting' 使用 require([deps],fn ) 语法。但是我无法让块延迟加载。首先,我不知道具体在哪里,我需要在 AngularJS 将用户路由到下一页之前导入这些块。我正在努力寻找明确的责任分离。

是否有人向我指出了一个示例 AngularJS 应用程序,其中 webpack 用于在每个路由之后异步加载控制器/指令/过滤器?

我关注的链接很少: Should I use Browserify or Webpack for lazy loading of dependancies in angular 1.x https://github.com/petehunt/webpack-howto#9-async-loading http://dontkry.com/posts/code/single-page-modules-with-webpack.html

【问题讨论】:

【参考方案1】:

Sagar Ganatra 写了一篇很有帮助的 blog post 关于代码拆分的文章。

令人惊讶的是,Angular 的模块系统并不真正支持代码拆分。但是,有一种方法可以通过在配置阶段保存对 Angular 的特殊提供程序的引用来实现代码拆分。

[...] 当 Angular 初始化或引导应用程序、函数 - 控制器、服务等时。在模块实例上可用。在这里,我们延迟加载组件,并且功能稍后不可用;因此我们必须使用各种提供者功能并注册这些组件。提供者仅在 config 方法中可用,因此我们必须在初始化应用程序时将这些提供者的引用存储在 config 函数中。

window.app.config([
    '$routeProvider',
    '$controllerProvider',
    '$compileProvider',
    '$filterProvider',
    '$provide',
    function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) 

        $routeProvider.when('/login', 
            templateUrl: 'components/login/partials/login.html',
            resolve: 
                load: ['$q', '$rootScope', function ($q, $rootScope) 

                    var deferred = $q.defer();

                    // lazy load controllers, etc.
                    require ([
                        'components/login/controllers/loginController',
                        'components/login/services/loginService'
                    ], function () 

                        $rootScope.$apply(function () 
                            deferred.resolve();
                        );

                    );

                    return deferred.promise;
                ]
            
        );


        //store a reference to various provider functions
        window.app.components = 
            controller: $controllerProvider.register,
            service: $provide.service
        ;

    
]);

现在在你的loginController 中,例如你写

app.components.controller('loginController');

懒惰地定义你的新控制器。

如果你也想延迟加载你的模板,我推荐使用ui-router。在那里您可以指定templateProvider,即basically a function to load templates async

【讨论】:

谢谢,我也发现多次调用 $apply 是不正确的。***.com/questions/12729122/… 也许每条路线一次应该没问题,我猜。 是的,你可能是对的。基本上你必须决定:是在调用 $apply 之前等待每个组件加载,还是尽快传播更新。【参考方案2】:

这是引自 https://github.com/webpack/webpack/issues/150

webpack 是一个模块打包器,而不是一个 javascript 加载器。它从本地磁盘打包文件,不从网络加载文件(除了它自己的块)。

使用 javascript 加载器,即。 e.脚本.js

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js", function() 
  // ...
);

【讨论】:

以上是关于AngularJS 和 Webpack 集成的主要内容,如果未能解决你的问题,请参考以下文章

使用 webpack 导入 angularjs 的最佳实践是啥?

AngularJS 模块 + Webpack + ES6 导入 - 依赖注入和连接顺序问题

在 Heroku 上部署 AngularJs + webpack + gulp

使用 webpack 导入 angularjs 模块

一篇入门AngularJS

在带有 Webpack 和 Typescript 的 AngularJS 1.5 组件中使用外部 HTML 模板