javascriptTweet前にも記事を書きましたが、少し勉強した中で他にも解決法を見つけたのでまとめておきます。クライアントサイドのJavaScriptではrequireを使ってNode.jsのモジュールを読み込むことはできません。したがって以下の様なツールを組み込む必要があります。Reactライブラリを例に使用していきましょう。CDNBrowserifyWebpackRollupCDN主要なライブラリはCDNから<script>タグを使って読み込むことができます。cdnjsやjsdelivrも同じように利用可能です。cdnjsを使用すると次のようになります。src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>ただ、<script>タグの挿入先には注意が必要です。</body></html>上記HTMLのように<head>タグ内で読み込むと、完了するまで以降のHTMLのレンダリングを停止します。</body></html>上記HTMLでは、<body>タグ内のレンダリングが終わってからライブラリを読み込むためレンダリングの停止が発生しません。今回は<body>タグ内にReactライブラリを使用する必要があり、予期しないエラーを防ぐために<head>タグ内で読み込むことにします。Browserify上記CDNはajax通信を通してReactライブラリの読み込み、Babelのコンパイルを実現しているため、シンプルではありますが速度的に問題があります。Browserifyを使えば、オフラインでライブラリを使用し、コンパイルすることができます。ライブラリとbrowserifyのプラグインであるbabelifyとプリセットをインストールします。babel-preset-es2015main.jsを用意します。document.getElementById('content'));次のコマンドでmain.jsファイルに使われているモジュールをバンドルし、bundle.jsファイルに書き出します。bundle.jsこのbundle.jsファイルをHTMLから読みこませればOKです。</body></html>ただし、このままでは、main.jsファイルに変更があるたびにコマンドを叩く必要があるので、gulpなどのビルドツールに組み込みましょう。uraway.hatenablog.comWebpackコンフィグファイルに設定を指定することでバンドルのみならず、トランスフォーム、パッケージングも可能にしてくれるバンドラーです。個人的にはBrowserifyより好きです。webpackと、トランスフォームに必要なローダーとプリセットをインストールします。--save-devwebpack.config.jsファイルを用意して、以下のように読み込み先、出力先、ローダーを設定します。},};コマンドを叩くと、コンフィグファイルで指定したバンドルが実行されます。ES6の最小構成を考えてみる。RollupRollupは次世代のバンドラーです。Webpackと異なる点は、使用していないコードをバンドルから削除する点にあります。従来のバンドラーではライブラリの全体を読み込むため、ライブラリ内の必要でないコードをもバンドルしています。結果、Rollupとその他のバンドラーが出力するファイルには大きな容量差が生まれます。nolanlawson/rollup-comparison)この機能はWebpack2でも実装されるようです。Rollupは、デフォルトではES6モジュールのみをバンドルしますが、プラグインを使うことで、CommonJSのモジュールも処理してくれます。Rollup早速試してみましょう。必要なものをインストールします。rollup-plugin-replaceを読み込みます。babel-preset-react)も読み込んでおきます。babel-preset-react最終的にはpackage.jsonはこうなります。}}ルートディレクトリにrollup.config.jsを作成します。'iife'};.babelrcにバベルの設定を入れます。buildコマンドでrollup.config.jsにしたがってコンパイルが実行され、htmlファイルが開きます。サンプルドキュメントが結構書きかけなので、これからのツールですね。http://qiita.com/cognitom/items/e3ac0da00241f427dad6)個人的にはWebpackですら持て余してる感があるので、こっちはもう少しWebpackを勉強してからかな。ES6の最小構成を考えてみる。フロントエンドにおける...2015-12-20快適な開発環境を目指して(4)fluxでの開発を見据えて、gulpを使った開発環境を作ってみた。(2)@uraway_さんのツイートはてなブログをはじめよう!urawayさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。