ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

angular1系のコードを分割してbrowserifyで結合した話

javascript

重要

よくわからないまま
とりあえず分割して動いたので記事書いてます
なのでこれが最善だとは思ってません

むしろ「これダメじゃないの？w」とか思ってます^^;

本題

初めてのangularでコードを書いていて
とりあえずコードをカキカキしてたんだけど
factoryやcontrollerなどを1つのファイルに書いているのは違うなーと感じ
ファイルの分割をわからないなりに調べてやることにした話

現状

とりあえず現状を

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- ここらへんのDOMは省略 -->
  <script src="angular.js"></script>
  <script src="socket.io"></script>
  <script src="js/chatapp.js></script>
</body>
</html>



// chatapp.js
(function() {
  'use strict';

  var app = angular.module('app', []);

  app.factory('socket', function() {
    //socket.ioの準備
  });

  app.controller('chatCtrl', function($scope, $http, $timeout, socket) {
    //処理いろいろ
  }
})();

こんな感じでコード書いてまして
さすがにこれはあかんやろと思い今回の作業をすることに

とりあえず分割

分割だけやってみたパターン

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- ここらへんのDOMは省略 -->
  <script src="angular.js"></script>
  <script src="socket.io"></script>
  <script src="js/main.js></script>
  <script src="js/socketFactory.js></script>
  <script src="js/chatController.js></script>
</body>
</html>



// main.js
(function() {
  'use strict';

  angular.module('app', []);//ここにモジュール足していけばいいかなと
})();



// socketFactory.js
(function() {
  'use strict';

  angular.module('app').factory('socket', function($rootScope) {
    //処理いろいろ
  }
})();



// chatController.js
(function() {
  'use strict';
  angular.module('app').controller('chatCtrl', function($scope, $http, $timeout, socket) {
    //処理いろいろ
  }
})();

とりあえず分割はできたわけですが
これだとhtmlのscriptタグのところの読み込む順番に依存関係ができるという

これも駄目だなーと思ってたらQiitaのとある記事に出会い
読んでやってみようかと思ったけど
読んでもよくわからなかったので、自分なりにやってみる

browserify使った

本題の本題みたいな感じになってしまいましたが
ここからbroserify使ったバージョン

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!-- ここらへんのDOMは省略 -->
  <script src="js/bundle.js"></script>
</body>
</html>



// main.js
(function() {
  'use strict';

  require('angular');
  angular.module('app', []);//ここにモジュール足していけばいいかなと

  require('./chatController');
})();



// socketFactory.js
'use strict';
require('socket.io-client');
angular.module('app').factory('socket', function($rootScope) {
  //処理いろいろ
}



// chatController.js
'use strict';
require('socketFactory');
angular.module('app').controller('chatCtrl', function($scope, $http, $timeout, socket) {
  //処理いろいろ
}

これでbrowserify使ってmain.jsを読みこめばhtmlから依存が無くなったので
とりあえずこれで行こうと思ってるんですが
requireとか書いてるけどmodule.exportsしてるものはないし
ファイル増やすたびに、main.jsにrequire増やさないといけないし

どう書けば綺麗に書けて、ファイル分割できるのか知りたい