browserify-shim

(2016/05/01〜2016/06/11)
  • BrowserifyのrequireをCDNに飛ばすtransform

  • https://github.com/thlorenz/browserify-shim
  • scriptタグでJSライブラリを読み込むと
  • window.Reactやwindow.hljsなどのグローバルオブジェクトができる
  • browserify-shimを使うと
  • グローバルオブジェクトが現れるまで待ってからrequireを解決してくれる
  • 巨大なJSライブラリを読み込みまくるとjsが1MB近くなる

  • メガバイトです
  • スマホで見ようとすると軽く15秒ぐらい待つ羽目になる
  • CDNから読めばキャッシュ効く
  • 同じライブラリを他のアプリが読み込んでいてくれていれば、既にキャッシュされているかもしれない
  • React等のメジャーなライブラリならありうる
  • Reacthighlight.jsをCDNから読む例

  • 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"かチェックする