Help us understand the problem. What is going on with this article?

webpackとbowerを使ってreact.jsを読み込みgulpでビルドする

More than 3 years have passed since last update.

はじめに

webpackが流行ってきているようなので、がんばって使ってみます。
流れが早すぎておじさんには辛いです。

せっかくwebpackを使うのでreact.jsを使ってみます。
こちらもはじめて。

webpackとは

jsの依存関係を解決して、複数のjsファイルを1つに結合してくれるビルドツールです。
大規模なアプリケーションを開発する際に、力を発揮しそうです。

◎gulpなどで結合するのとの違い

gulpなどでjsファイルを結合する際は、読み込み順を気にする必要がありますが、
webpackの場合、requireした箇所でモジュールを読み込んでくれるので順番を気にする必要が無いようです。

webpackを使ってみる

◎webpackをインストール

sudo npm install webpack -g

◎ファイル構成

.
└── www
    ├── index.html
    └── js
        ├── main.js
        └── sub.js
main.js
var sub = require('./sub');
sub('test');
sub.js
module.exports = function(s) {
     alert(s);
};
index.html
<body>
   <script src="./dist/bundle.js"></script>
</body>

下記コマンドを実行

//webpack <input> <output>
$ webpack www/js/main.js www/dist/bundle.js

www配下にdist/bundle.jsが作成されます。

index.htmlをブラウザで開くとアラートが表示されます。

webpack.config.jsを使う

毎回コマンドを打つのは初心者の私には辛いので
設定ファイル(webpack.config.js)を使います。

webpackコマンド実行時のディレクトリ内に、webpack.config.jsがあった場合自動的に読み込んでくれます。

webpack.config.js
module.exports = {
    entry: './www/js/main.js',
    output: {
        path:__dirname + '/www/dist/',
        filename: 'bundle.js'
    }
}
$ webpack

bundle.jsがwww/dist/配下に作成されます。

bowerと連携する

react.jsなど必要なライブラリをbowerに管理します。
webpackと連携するには少しだけ手間が必要です。

公式サイトの情報はこちら

USAGE WITH BOWER

var path = require("path");
var webpack = require("webpack");
module.exports = {
    resolve: {
        root: [path.join(__dirname, "bower_components")]
    },
    plugins: [
        new webpack.ResolverPlugin(
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        )
    ]
}

ただし上記の方法だが、少し問題があり、
ResolverPlugin.DirectoryDescriptionFilePluginを使用すると読み込むライブラリのbower.jsonのmainが配列の場合読み込めなくなる。

◎解決方法

bower-webpack-pluginを使用する。
これでmainが配列の場合も問題なく読み込むことができる。

var BowerWebpackPlugin = require("bower-webpack-plugin");
module.exports = {
   plugins: [new BowerWebpackPlugin()]
}

gulpを使ってビルドする。

gulpタスクの中でwebpackを使うにはgulp-webpackが必要です。
gulp-webpackをまずはインストールします。

追記

naru0504さんよりコメント頂ましたので修正点追記します。

  • gulp-webpackは最新版はwebpack-streamと名前を変えている。 gulp-webpackだとビルドした際にwarningがでるのでwebpack-streamに移行したほうがよい。

webpackを実行する。設定はwebpack.config.jsを利用。

$ npm install gulp-webpack --save-dev
gulpfile.js
var gulp = require('gulp');
var webpack = require('gulp-webpack');
var webpackConfig = require('./webpack.config.js');

gulp.task('build', function() {
    return gulp.src('')
        .pipe(webpack(webpackConfig))
        .pipe(gulp.dest('.www/dist/'));
});

これでgulp buildでwebpackを実行できるようになりました。

react.jsを使う

◎ファイル構成

.
├── bower.json
├── bower_components
├── gulpfile.js
├── node_modules
├── package.json
├── webpack.config.js
└── www
    ├── index.html
    └── js
        └── main.jsx

◎jsx-loaderをインストール

webpackで、JSXをコンパイルするには。jsx-loaderが必要となる為、インストールします。

$ npm install jsx-loader --save-dev

webpack.confing.jsのmodule.loadersで、jsx-loaderを読み込む。

webpack.confing.js
 module.exports = {
     entry: {
     bundle:'./www/js/main.jsx'
     },
     output: {
         path: __dirname + '/www/dist/',
         filename: '[name].js'
     },
     module: {
         loaders: [{
             test: /\.jsx$/,
             loader: 'jsx-loader?harmony'
         }]
     },
     //externals: {
     //    'react': 'React'//html側でreact.jsを読み込んでいる場合は必要
     //},
     resolve: {
         extensions: ['', '.js', '.jsx'],
     }
 };

補足

①harmonyオプション

loader: 'jsx-loader?harmony'のharmonyオプションを追加することで、ES6の仕様の一部を使うことができるようになります。

②externals

詳しくは下記を参照

webpackのconfiguration#externals
webpackによって解決されるべきではない依存関係を指定しますが、生成されたバンドルの依存関係になります。

よく意味がわからなかったが、webpackのコンパイルに含めないものを定義するようです。
例えば、react.jsをhtml側ですでに読み込んでいる場合、ビルドに含める必要がないのでexternalsに追加します。

◎react.jsをインストール

 bower install react --save-dev
index.html
<body>
    <div id="content"></div>
    <script src="./dist/main.js"></script>
</body>

main.jsx
var React = require('react');

var CommentBox = React.createClass({
  render: function() {
    return (
     <div className="commentBox">
        わけワカメ
      </div>
   );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);

こちらの状態でビルドしてみたところ、下記のエラーが発生した。

React.createClass is not a function

v0.14でビルドする場合に発生しているが、原因がわからなかった。。。

v0.13インストールし直しでビルドしてみる。

$ bower install react#0.13 -save-dev
$ gulp build

今回はエラーが発生せず、下記の画面が表示された。

localhost 3000.png

追記

naru0504さんよりコメント頂ました

  • React v0.14.xでビルドした際のバグはbower-webpack-pluginのバグの可能性有り
  • webpackはnpmでのパッケージ管理を推奨している為、bowerではなく、なるべくnpmを使用したほうがいいかもしれない

終わり

画面を表示するだけで大変でした。
もっとそれぞれの使い方について理解する必要があります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした