commonJS 未対応 version の Angular.js でも browserify したい

あらすじ

Angular.js 1.4 が CommonJS に対応してきたので require したくなりました。なんですが既存の app の Anugluar.js が 1.3.x だった場合はどうすればいい？

まずは 1.4 から試す

% mkdir angular-browserify-sample && cd $_ 
% npm init -f
% npm install angular@1.4.0
% npm install browserify

browserify にパスを通す。以下は direnv を使った例。素直にnpm -g install browserifyとしてもよい

% echo 'export PATH=node_modules/.bin:${PATH}' > .envrc
% direnv allow

サンプルコードを作成

% mkdir app
% touch app/app.js app/index.html

app/app.js を以下の通りにする

% cat app/app.js
var angular = require('angular');

angular.module('app', []).controller('AppController', function($scope) {
    $scope.message = 'Hello, World!';
});

変換

% browserify app/app.js > app/bundle.js

html を用意

% cat app/index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS 1.4 を試す</title>
</head>
<body ng-controller="AppController">
    {{ message }}
    <script src="bundle.js"></script>
</body>
</html>

ブラウザで Hello, World! を確認します。

% open app/index.html

※変換処理は grunt や glup などで自動化しますがこの記事では説明を割愛します。

1.3 でできるだろうか

angular@1.4.0 を削除

% npm uninstall angular
unbuild angular@1.4.0

代わりに angular@1.3.16 を準備

% npm install angular@1.3.16 --save
% npm install browserify-shim --save

package.json を修正

% git diff
diff --git a/package.json b/package.json
index 570cd39..0a74280 100644
--- a/package.json
+++ b/package.json
@@ -12,5 +12,13 @@
   "dependencies": {
     "angular": "^1.3.16",
     "browserify-shim": "^3.8.8"
+  },
+  "browserify": {
+      "transform": [
+          "browserify-shim"
+      ]
+  },
+  "browser": {
+    "angular": "./node_modules/angular/angular.js"
+  },
+  "browserify-shim": {
+    "angular": {
+      "exports": "angular"
+    }
   }
 }

変換して確認。

% browserify app/app.js > app/bundle.js
% open app/index.html

無事 angular@1.3.16 でも require できた。 commonJS の require に対応していないモジュールでも browserify-shim 使えば何とかなるようです。

あいつの日誌β

働きながら旅しています。

commonJS 未対応 version の Angular.js でも browserify したい

あらすじ

まずは 1.4 から試す

1.3 でできるだろうか

SEE ALSO