まずはじめに
ブラウザ側で require を使いたい場合にbrowserify を使っていると思います。
このbrowserifyのサンプル、よくみかけるのですが、HTMLを含まずJavaScript内だけで話が終わるサンプルも多く、また、gruntやgulpと組み合わせて使う、みたいなサンプルも多く、タイトルどおりのシンプルな使い方をしたいときにやり方がわからず、かなり調べるはめになってしまいました。
もっとシンプルに browserify だけの動きについて理解したいなと思い、自分のため、また、同じ疑問をもつ人のために、まとめておきます。
たどりにたどってたどり着いたのは、Qiitaではなく、stack overflow 日本語版でした。
browserify - browserifyでまとめたモジュールをHTMLのインラインスクリプトから実行したい - スタック・オーバーフロー
あと、gulpは、一瞬使いましたが、タスクランナー使うのは今後やめようと思います。
理由は、この素晴らしい記事が教えてくれました。解決するために複雑なものを導入すると苦労します。なるべくシンプルな解決策を選びたいと思ってます。
[意訳]私がGulpとGruntを手放した理由 - Qiita
コード
自分がやりたいことも、ここ(スタックオーバーフロー)の方の質問の方と同じく、browserify で作成したものを HTML内のインラインスクリプトから使いたいというものです。
リンク先の質問者の方は Coffee Script を使っているらしく、解決自己レスのCoffeeScript コードは意味がわからないのでスルーします。(自分はCoffeeScriptは使わないです。素のJavaScriptやBavelやTypeScriptの方が望ましい気がします)
ento♦さん、という方の解答が大変すばらしく、結局このまま使えばいいのですが、ここで自分ははまったので、試した結果を書きます。
module.exports = 'hi';
>browserify -r ./mymodule.js:mymodule > appplication.js
>browserify -r ./mymodule.js:mymodule -o appplication.js
コマンド1とコマンド2は同じ機能になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="application.js"></script>
<script>
var mymodule = require('mymodule');
</script>
</head>
<body>
<!-- page content -->
</body>
</html>
はまらないために
ここで動作確認に大事だったのは、broserify の -r オプションと、そこで指定されるrequire用の名前でした。
-r オプションのあるものは、生成後のファイルに
[require=]の記述があり、
-r オプションのないものはそれがありません。
なので、-r オプションを指定することで、HTML内のインラインスクリプトで require が使えるということになります。
-r がないと、動きません。
また、わかりにくいのは、require用の名前を省略することができるということです。
>browserify -r ./mymodule.js -o appplication.js
これは動作してrequire用の名前がつきますが、
これがなぜか、[/mymodule.js]となります。
なので、HTML内のJavaScriptは次のようになります
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="application.js"></script>
<script>
//NG var mymodule = require('mymodule');
//NG var mymodule = require('/mymodule');
//NG var mymodule = require('./mymodule.js');
var mymodule = require('/mymodule.js');
</script>
</head>
<body>
<!-- page content -->
</body>
</html>
コメントでNGと書いてあるものは、全て動きません。
一字一句あわないと動きません。動きそうで動かないので、ずいぶん、はまりこんでしまいました。
コマンドエラー
さらには、つぎのコマンドはエラーになります。
ファイル指定の先頭に ./ がないからです。
>browserify -r mymodule.js -o appplication.js
Error: Cannot find module 'mymodule.js'
>browserify -r mymodule.js:mymodule -o appplication.js
Error: Cannot find module 'mymodule.js'
パスは通っているような感じなのになぜかコマンドがエラーになります。これもはまってしまいました。しかも、エラー表示が、Cannot find module って、ファイルは見えているのに...と思ってしまいました。
ということで、browserify を使う時は、-r オプションと、require用の名前指定、おすすめします。