将AngularJS的脚本合并为一个

这是AngularJS AdventCalendar的第九个页面。

将AngularJS的脚本合并为一个。

当编写AngularJS时，很容易出现脚本标签的堆砌现象。对我个人来说，这让我非常烦恼，所以我希望能够将它们整合到一个文件中。

例如，以AngularJS的示例应用程序Angular phonecat为例，

  <script src="bower_components/jquery/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/animations.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>

这次的目标是把这个东西整合到一个JS文件中。
另外，顺便也想使用Coffee脚本。

因此，我在这里准备了示例代码。

使用Browserify

git clone https://github.com/mikakane/angular-phonecat.git
cd angular-phonecat
git checkout browserify
npm init
npm start

只要服务器自动启动，访问http://localhost:8000/app就可以运行。

作为内容，仅仅是将现有的js文件用Coffeescript在coffee目录中重新编写，并在package.json中添加构建配置。

由于master分支是派生分支的来源，因此可以通过比较master分支和browserify分支来查看差异。

在AngularJS中，将模块插入全局变量angular的方式，使得不需要像CommonJS那样编写模块也可以实现。

angular = require("angular") # NG angular 変数が消える
require("angular") # これでOK

我想你可以在浏览器中查看代码，确认JS文件已被打包成bundle.js。

使用webpack

我们也准备了一个Webpack版本。

git clone https://github.com/mikakane/angular-phonecat.git
cd angular-phonecat
git checkout webpack
npm init
npm start

基本与 browserify 分支相同，只是添加了 package.json 文件和 webpack.config 文件的描述。

option 1:
该部分与 browserify 分支基本一致，只是增加了 package.json 的描述和 webpack.config 的编写。

Note: Translations may vary depending on specific context and linguistic preferences.

用这种方式来看，将编译设置之类的内容统一放在webpack.config中的webpack似乎更方便。

总结

我自己试了一下，可能用类似Angular的写法，普通的组合也可以。不过如果使用像browserify和webpack这样的构建系统，可以使用一个源代码分割开发版带有追踪的代码和商用的minified代码，还可以用require引用node模块，总体上非常方便。

在实际开发中，随着文件的增多，例如 controller 文件变得越来越庞大，所以如果将每个 controller 单独模块化，不依赖于 Angular 变量，那么我们就可以进行模块测试，这样会更方便吧…之类的。

哦，順便提一下，并非所有ng系列的模块都兼容webpack或者browserify，所以在大量使用Angular系列库的情况下，请小心。