900 views

インストール

npm install -g browserify

基礎

https://qiita.com/fgkm/items/a362b9917fa5f893c09a
を参考に。

パスを変える

以下のパスにファイルを配置する。

lib\parts1.js
lib\parts2.js
src\main.js

リリース先は以下とする。

release\app.js

main.jsのソースコードは以下。
1行目、2行目にパスを相対パスで指定する。

main.js

var parts1 = require('../lib/parts1.js');
var parts2 = require('../lib/parts2.js');

parts1(5);
parts2(5);

ビルドするときはsrcの下に移動して以下を実行する。

browserify main.js -o app.js

main.jsに書かれている相対パスを見て自動的にファイルをリンクしてくれる。

HTMLのインラインからbrowserifyで作成した関数を呼び出す

main.jsに作成したtest関数をhtmlのインラインで使用する場合。index.html内でrequireすればよいだけ。
main.js

var parts1 = require('../lib/parts1.js');
var parts2 = require('../lib/parts2.js');

parts1(5);
parts2(5);

function test() {
    console.log("main");
}

module.exports = test;

ビルド方法
エクスポートしたい関数名を-rオプションで指定する。

browserify -r ./main.js:test > ..\release\app.js

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Browserify Sample</title>
    <script src="./release/app.js"></script>
</head>
<body>
    <script>
        var test = require('test');
        test();
    </script>
</body>
</html>

index.htmlでrequireが使えるんだな…。

Page 3 of 16.

前のページ次のページ

[添付ファイル]

1.plugin.zip