読者です 読者をやめる 読者になる 読者になる

nukorouのゆるガバ帳

ゆるくガバく適当に

【第1話】フロントエンド修行物語【WebpackとRiot.js準備編】

まえがき

これは刹那を作る修行物語の第1話です。 前回の記事はこちらです。 nukorou.hatenablog.com

前回、フロントのデザイン作るとか言ったけど、あれは嘘だ。デザインだけを作る*1の面倒すぎたから、今回は機能作りながらデザインも適用していくことにした。

俺がアホ過ぎるんかもしれんけど、Webpackを理解するのにめっちゃ時間かかった。わかると便利。

こんなクソ雑魚ブログを見てくれてる人はかなり少ない*2とは思うが、普段サーバサイドばっかりでフロント全然知らんって人は境遇的に参考になるかもしれない。ただ、よくあるありがたいチュートリアル記事ではないので注意。

Webpackの概念

Webpackは、いろんな機能があるけど、今回の主な用途はJSのパッケージの読み込み。

npmとかで公開されてるパッケージを使いたかったとする。普通はscriptタグでjsをcdnとかから読み込むと思うけど、node_modules以下にインストールされるパッケージはそんな風には読み込めない。

では、どうするか。require('<モジュール名>')で呼び出して上げて、bundle.jsとしてまとめてしまうのだ。

これを前提として理解しておくと、混乱せずに進めれたかなと個人的に思う。

いざ、Webpack実践

参考はサイトはここ。というか、ディレクトリ構成以外は最初は完コピしてた。 shigekitakeguchi.github.io

最新版が入って欲しいから、全部コマンドで打ち込んでたけど、package.jsonをダウンロードしてnpm updateとかで最新パッケージが入ったのかな〜と今更。

package.jsonはこんな感じ。メインはriotjs,bootstrap,bootstrap-material-designとかかな。それ以外はビルドのために必要だったりするもの。jQueryクソっていう結論から、仮想DOMが生まれたはずなので出来たらjQuery使いたくないんだけど、Bootstrapが使うから、「ま、いっか」という結論で使ってしまっている。

{
  "name": "views",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "webpack": "webpack -w --progress --colors",
    "lite": "lite-server",
    "start": "concurrently \"npm run lite\" \"npm run webpack\""
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015-riot": "^1.1.0",
    "bootstrap-webpack": "0.0.5",
    "concurrently": "^3.1.0",
    "css-loader": "^0.26.1",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "imports-loader": "^0.7.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "lite-server": "^2.2.2",
    "node-sass": "^4.0.0",
    "riotjs-loader": "^3.0.0",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.14.0"
  },
  "dependencies": {
    "bootstrap-material-design": "^0.5.10",
    "riot": "^3.0.4",
    "snackbar": "^1.0.2"
  }
}

お次は、webpack.config.jsです。こいつがクセモノ(?)で、やってることは単純なんだけど初見ではゴチャゴチャと書かれていてうっとおしいと思う。超ざっくりいうと、jsのインプットとアウトプットを指定して、Riotのタグとかはコンパイルしてcssとかフォントとかも1つのjsファイルにまとめるような設定になっている。あと、jQuery$で使えるようにもしている。

var webpack = require("webpack");
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: '../static',
        filename: 'bundle.js',
        publicPath: '../static/',
    },
    module: {
        preLoaders: [
            {
                test: /\.tag$/,
                exclude: /node_modules/,
                loader: 'riotjs-loader',
                query: {
                    type: 'babel'
                }
            }
        ],
        loaders: [
            {
                test: /\.js$|\.tag$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {test: /\.css$/, loader: "style-loader!css-loader"},
            {test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff"},
            {test: /\.ttf$/, loader: "file-loader"},
            {test: /\.eot$/, loader: "file-loader"},
            {test: /\.svg$/, loader: "file-loader"},
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.tag']
    }
    ,
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.ProvidePlugin({
            riot: 'riot'
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ]
}

使用例

npm run startこれだけで勝手にいい感じに自動で監視しながらコンパイルしてくれる。

次回予告

次はたぶんRiot.js実践編だと思う。

*1:普段は、デザインだけBootstrap studioってソフトでデザインだけ先に作って後で合体させるという手法を使ってます。

*2:いない