基于webpack构建的angular 1.x工程（angular篇）

  上一篇基于webpack构建的angular 1.x 工程（一）webpack篇里我们已经成功构建了整个项目的打包配置。接下来我们要继续让angular在工程里跑起来。

首先要知道怎么改写

之前的工程由于是用gulp打包的，具体原理我不太懂，不过貌似会把所有的js自动注入到index.html中。由于js很多，所以为了不互相干扰，产生全局变量污染的问题，它里面所有angular都是用立即执行函数表达式（IIFE）来写的：

(function(){
    'use strict';

    angular.module("app.core",[ 
        'ngCookies','angular-cache'
    ]);
})();

  这样的写法在webpack是不必要的了，webpack是根据js之间的依赖关系来加载打包项目的。不同的模块之间webpack都会有标识来标志，所以不会说存在干扰和污染的问题。那我们应该怎么写呢？要写成AMD/CMD规范形式的。为了方便理解，我们把立即执行函数表达式去掉，改成这样的：

const ngCookies = require('angular-cookies')
const ngCache = require('angular-cache')
module.exports = angular.module("app.core",[ 
                         ngCookies,ngCache
                     ]);

  这个是符合webpack要求的写法。首先先引入我们需要的模块，然后编写我们的模块，最后输出我们要暴露给外部调用的接口。于是我就把所有IIFE都改成了这种形式。

controller那些要怎么办？

接下来问题就来了，在同一个angular应用模块（module）中，各个控制器（controller）、过滤器（filters）、服务（services）等之间都是并列的兄弟关系，都是从属于模块。那我们应该来处理这些关系呢？经过查阅过别人的项目之后，我发现其实有两种写法：

1. 把各个从属的具体方法都写成一个模块，然后在模块声明时进行引入并声明，就像这样：

main.controller.js

module.exports =function mainCtrl($scope,$http,$stateParams,$state,$rootScope,$filter) {
    // your controller goes here
}

index.js

angular.module("app",[])
    .controller("mainCtrl",[$scope,$filter,require('./main.controller')]);

  这样的其实也可以输出一个数组，像这样：

main.controller.js

module.exports =[[$scope,function mainCtrl($scope,$filter) {
    // your controller goes here
}]

  相对应的，主要入口要这样写：

index.js

angular.module("app",require('./main.controller'));

  这样的写法适合从头开始的项目，好处是分的比较清晰。@H_404_53@但是对于我这个重构的项目，就会有麻烦：要改写的文件有太多了。@H_404_53@这么麻烦，我只能抛弃这种方式。

1. 每个模块都直接输出的是模块声明，然后只要把这个文件引入即可。@H_404_53@  熟悉angular的都知道，angular在整个应用中其实一个全局定义的对象。

每个模块在angular里注册之后，都会在angular里找得到。@H_404_53@这样的话，只要确保运行下面这段代码即可：

angular.module("app")
    .controller("mainCtrl",mainCtrl($scope){
      // your controller goes here
    }]);

  也就是说，我只要引用了这段代码，也算把这段代码运行了。@H_404_53@那这样的我就可以这样写：

main.controller.js

module.exports = angular.module("app")
    .controller("mainCtrl",mainCtrl($scope){
      // your controller goes here
    }]);

index.js

angular.module("app",[])
require('./main.controller')

  在main.controller.js我直接输出的是angular声明app模块的controller，然后在index.js定义模块之后,把这个文件引入之后，就相当于同时声明了这个controller，免去大量改动代码的麻烦。不过另一个问题出现了：我这里虽然免去了大量改动代码的麻烦，但是我那么多的controller，真的要一一写路径来引用吗？这样还是麻烦啊。不要惊慌。webpack已经预想到你这有这个问题了，特意写了一个可以引用大量文件的方法给你：require.context。这个方法可以让你查询指定路径的指定文件类型，然后引用进来。我们这里由于已经分类放好了，所有的controller都放在/app/module目录下面，因此查找也是轻而易举的事。所以我们的index.js可以写成这样：

module.exports = angular.module("app",[]);

//把所有js文件引入
function importAll (r) {
    r.keys().forEach(r);
}
importAll(require.context('./',true,/\.js$/));

  这样就解决了那些controller，filters等的问题。具体require.context的用法[参考这里]()

模块之间引用的问题

  当我们往我们的模块注入其他模块（自己写的或者angular插件）的时候，这个环节也有些要注意的地方。 @H_404_53@  首先，我们知道，angular注入其他模块的时候，其实只需要写注入模块的名字就可以了，angular可以自行去寻找相应的模块。这样的话，我们像上面那样写的模块声明，直接输出其实会有问题：

app.core.module.js

module.exports = angular.module("app.core",[])

  这里其实输出的是angular的模块，并不是模块的名字。如果我们直接引用的话，像这样：

index.js

var appCore = require('./modules/appCore.module.js')
module.exports = angular.module("app",[appCore]);

  这样的话，angular就会报错：

Error: [ng:areq] Argument 'module' is not a function,got Object

  要解决这个问题其实很简单，只要调用angular的.name方法就可以了，所以上面可以改写成这样：

app.core.module.js

module.exports = angular.module("app.core",[]).name

  或者这样改：

index.js

var appCore = require('./modules/appCore.module.js')
module.exports = angular.module("app",[appCore.name]);

  两种方法选一个执行即可。

  其实如果是插件的话，你在npm安装的插件一般都不用担心这个问题，毕竟人家早就想到会有这个问题了。但是如果是其他途径弄来的话，这个就复杂了。

插件注入的另一种问题

  上面提到的是插件注入可能会遇到的问题之一。然而还有一种情况。@H_404_53@这种情况就是插件也使用了IIFE（立即执行函数表达式）。听起来就很烦。自己的代码，自己知道怎么写的，所以改起来不会怎么出问题，但是别人的代码的话就不一定了。为了避免错误，我选择不改动插件的代码。而是，直接在打包的时候分开打包，然后直接注入的时候写上插件名字即可以注入成功。详细可以看我的webpack配置。

以上就是用webpack打包angular 1.x 的时候写angular所需要注意的地方。如果想看webpack的配置可以查看我前一篇文章：

基于webpack构建的angular 1.x 工程（一）webpack篇

用于参考的一位前辈的类似项目,让大家也参考一下： @H_404_53@https://github.com/IamBusy/webpack-angular

想看详细代码，可以访问我的项目地址 @H_404_53@https://github.com/homerious/angular-ionic-webpack

有什么问题或者不对的地方欢迎指出，谢谢阅读！

本文原创，未经授权请勿转载。