browserify-shim
scriptタグでJSライブラリを読み込むと
window.Reactやwindow.hljsなどのグローバルオブジェクトができる
browserify-shimを使うと
グローバルオブジェクトが現れるまで待ってからrequireを解決してくれる
巨大なJSライブラリを読み込みまくるとjsが1MB近くなる
メガバイトです
スマホで見ようとすると軽く15秒ぐらい待つ羽目になる
CDNから読めばキャッシュ効く
同じライブラリを他のアプリが読み込んでいてくれていれば、既にキャッシュされているかもしれない
React等のメジャーなライブラリならありうる
package.json"browserify-shim": {
"react-dom": "global:ReactDOM",
"react": "global:React",
"highlight.js": "global:hljs"
},
index.html<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.3.0/highlight.min.js" />
ビルドする
$ browserify --verbose -t [ babelify ] -t [ browserify-shim ] -g uglifyify src/client/index.js -o public/bundle.js
開発時は./node_modules/以下を使う
開発時はscriptタグとbrowserify-shimを消せばいい
process.env.NODE_ENV === "production"かチェックする