株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

JSファイルをモジュールとしてrequireしたかったので、WebPack を使ってみた:メモ

2015.12.23

CATEGORY - web

※あくまでメモです。
そのうち、いろいろ使い方をまとめて記事にしたいと思います笑

WebPack とは?

WebPack

画像引用元:WebPack

JavaScript を書いてると、モジュールごとにわけたりして、ほんと、ファイルの数が増えていくんですよね。

で、全部のファイルをhtmlで読み込まないといけないっていう。

しかも、後で使うファイルより、先に使うファイルを前に読み込まないといけないとかもろもろあって。。。(※まあ、当然ですが。。)最初のうちはいいのですが、そのうちややこしくなってくるんです。

うぎゃああああ!オリャ(ノ-o-)ノ ┫;:・

ってなりますw

そこで、複数のJSファイルをまとめてくれて、それぞれのJSファイルで使うモジュールを呼び出して使えるようにするのが、「WebPack」ってやつっす。

RequireJS とか、Browserify とかも同じ類なんですが、最近なんか、WebPack がいいって聞いたので、ちょっと使ってみました^^。

WebPack の仕様です

[app.js]

    var $ = require('jquery');
    var _ = require('underscore');
    var Backbone = require('backbone');
    var AppRouter = require('./router/AppRouter');

    $(function() {

      // ごにょごにょ

    });
  

てな感じで、使いたいモジュールをrequireして、(※jQueryとかは、npm install で、ローカルに保存してそのままrequireします。とりあえず、ローカルで使う前提で。。)
他のjsは相対パスでrequireします。(.js ってゆー拡張子は省略できます)

[./router/AppRouter.js]
    var TestOneCompositeView = require('../view/testOneCompositeView');
    var TestTwoCompositeView = require('../view/testTwoCompositeView');

    module.exports = Backbone.Router.extend({

      // ごにょごにょ

    });
  

ってゆーふーにすると、app.js でrequireしてるJSのモジュールを読み込んで、読み込まれているJSのモジュールで使われてるJSファイル(AppRouter.jsの場合、../view/testOneCompositeView.js とか..)も順々に読み込んでまとめてくれるので、htmlでいちいち全部のファイルを読み込まなくてもよくなります。

WebPack の使い方

最初の使い方はとっても簡単です。

(1) 結合後のJSファイルを用意します。(※今回は bundle.js という名前にします。中身はからっぽでいいです。)

(2) webpack.config.js を用意します。(※いわゆる設定ファイルです)

[webpack.config.js]

    module.exports = {
      entry: {
        app: ["./app.js"]
      },
      output: {
        filename: "./bundle.js"
      }
    };
  

entry には、呼び出し元のファイルを指定します。(※今回は、app.js)

output には、結合後のファイルを指定します。(1で作ったbundle.js)

(3) webpack をインストールします。
ターミナルで、
    npm install --save-dev webpack
  

npm は node.js がないと使えないので、入れてない人は、node.js もインストールしてください。

(4) 準備が整ったので、app.js を元に継承するすべてのJSを結合します。
ターミナルで、webpack.config.js のあるところまで、cd で移動して、
    webpack
  

これだけw w w w

こんだけで、bundle.js には、結合されたJSがすべてまとまって入ってるはずです!

(4) パチパチパチパチw

jQueryとかBackboneとかいろいろやりたいので

こんだけw と言っておきながら、さっきのapp.js ファイルで試すと、jQueryがないとか、backbone がないとか怒られるはずですw


おこられるんかーい!


って思ったかた!、はい!おこられます^^

とゆーわけど、必要なものはとにかくローカルにインストールしときましょう^^

今回は、

npm install –save-dev jquery
npm install –save-dev underscore
npm install –save-dev backbone
npm install –save-dev backbone.marionette

これくらいですかね。。

ちなみに、backboneのテンプレートで、Handlebar を使いたかったので、
Handlebar ファイルをwebpackで読み込めるようにするために、僕の場合、

npm install –save-dev handlebars
npm install –save-dev handlebars-loader

もしておきました。
ちなみに、グローバルでinstallしたい場合は、最後に [-g]をつけましょう。

とりあえず、これで準備は整ったので、webpack.config.jsを下記のように書き換えます。

[webpack.config.js]

    var webpack = require('webpack');

    module.exports = {
      entry: {
        app: ["./app.js"]
      },
      output: {
        filename: "./bundle.js"
      },
      module: {
        loaders: [
          { test: /\.handlebars$/, loader: "handlebars-loader" }
        ]
      },
      plugins: [
        new webpack.ProvidePlugin(
          {
            jQuery: "jquery",
            $: "jquery",
            _: "underscore",
            Backbone: "backbone",
            Marionette: "backbone.marionette"
          }
        ),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        })
      ]
    };
  

いちよ、補足しておくと、、、、
・module : loaders に指定すると、その拡張子のファイルをJS上でrequireできるようになります。
ちなみに、そのためには、「なんちゃら-loader」みたいなのが必要になるので、それぞれ、npm install が必要でっす!
詳細は、下記でw

WebPack Loader いちらん


・plugins : webpack.ProvidePlugin に指定されたものは、その文字で認識してくれます。jQuery を “jquery”にという言葉にして、他のJS内で、モジュールとして、requireできるようにしています。
・plugins : webpack.optimize.UglifyJsPlugin は、ただ単に、結合後のJSを圧縮してくれるだけです。ちなみに圧縮しないとけっこう重くなります笑


はい。

とゆーわけど、ここで、また、ターミナルで “webpack”って打てば、ちゃんとエラーも出ないで、JSも結合されてると思います^^


いじょう、めもでした♪

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP