browserify-shimを使って、CDN経由で外部JSライブラリをrequireする
Browserifyをここ最近よく使うようになってきました。ReactのJSXやES2015のコンパイルもBrowserifyで行えるのでなかなか便利です。今回こちらのブログに自作のjQueryプラグインを導入したのですが、npm経由でインストールして、Browserifyを使ってrequireして読み込むようにしました。ただjQuery本体だけはCDN経由で読み込みたいと思い、browserify-shimを使ってみることにしました。その辺の話を書きたいと思います。 BrowserifyとはBrowserifyはご存知の方も多いと思いますが、ブラウザで使用するJSファイルに対して、requireメソッドを使ったモジュールの読み込みを可能にしてくれるツールです。さらに依存関係を考慮し、複数のJSファイルを1つのファイルにまとめてくれる便利なツールです。 Browserifyインストールはn
React入門 - Part2: Browserify/Reactify/Gulpを使う - Qiita
前回作成したhelloworldはブラウザでJSXTransformerを読み込みオンラインでjsにコンパイルしていました。実行時にChromeのデベロッパーツールに表示されるように、予めJSXはコンパイルすることが推奨されています。コンパイルの方法は、jsxコマンドを使う方法、 BrowserifyとReactifyを使う方法、最後にGulpのタスクでまとめる方法を順番に試してみます。 Getting Startedの復習 作成したhelloworld.jsxを少し修正してコンポーネントを作り構成してみます。ディレクトリ構成は以下です。 $ cd ~/react_apps/helloworld/ $ mkdir src dist $ mv helloworld.jsx src/ $ tree . . |-- dist |-- index.html `-- src `-- hellowor
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
