npm と webpack でビルドできるようになったので外部コンポーネントを利用してみる。

Element という、名前つけるときにちょっとは考えたほうがいいと思われるコンポーネントがあるらしく、これを使ってみる。非常にググラビリティが低い

公式ココ Element - A Desktop UI Toolkit for Web

$ npm install --save element-ui

まず entry.js に引き込む。

本体とCSSと多言語対応の日本語版を入れて設定する。

import Vue from 'vue';
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import localeja from 'element-ui/lib/locale/lang/ja'
Vue.use(ElementUI, { localeja })
 
import store from './Store';
import RootFolder from './RootFolder';
 
window.Vue = Vue;
window.store = store;

さあビルドしてみよう

Module parse failed: Unexpected character '@'

このようなエラーが出てビルドが失敗する。 これは webpack が js を統合するためのツールで CSS なんか知らんがなということである。

ここで CSS を読み込んで js として組み込む仕組みが必要になる。 これを webpack では loader と呼ぶ。今回は css の loader が必要だということだ。

それは style-loader と css-loader というモノとして提供されているのでこれを使う。

$ npm install --save-dev style-loader css-loader

それぞれの役割としては css-loader が CSS 自体の依存性を解釈して1つにする、 その出来上がったモノを style-loader が style タグとして埋め込む js に変換するという感じである。

この2つの loader の使い方を webpack に教えるために webpack.config.js に追記する。

このようになる

const path = require('path');
module.exports = {
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    entry: './src/entry.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'./dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
};

rules の場所が loaders になっている資料もあるが、それは古い記述。 test の部分に適用する対象を指定していて、 use に使いたい loader を書く。

この記述では、css-loader を動かしてその結果を style-loader に渡すという感じになっている。 シェルのパイプと逆のような記述。

これでビルドする。

と今度はまた別のエラー ttf とか woff とか知らんよというやつが出る。 この辺はフォントの話で url-loader という loader が解決するっぽい。

入れる

$ npm install --save-dev url-loader

最終的にこうなる

const path = require('path');
module.exports = {
     resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    entry: './src/entry.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'./dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(svg|eot|ttf|woff|woff2)?$/,
                use: ["url-loader"]
            }
        ]
    }
};

では最後に index.html 内に適当に書き込む

<el-button type="primary">ほげほげ</el-button>

対象をブラウザで読み込むとキレイなボタンが画面に現れた。

style 要素を確認すると大量の CSS が埋まっていることが確認できる。

既存の部品は input と button だがこれをそっくりそのまま入れ替えても動くのかということ。

まずはボタンを入れ替えてみる ここ を眺めながら。

ボタン部分は全部 ItemName.js に集まっているのでここを修正する。 依存性も指定しておく。

ほぼそのままスライドしただけ。

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import localeja from 'element-ui/lib/locale/lang/ja';
Vue.use(ElementUI, { localeja });
 
import store from './Store';
 
var ItemName = Vue.extend({
    template: `
        <div>
        <template v-if="isEdit">
            <input type="text" v-bind:value="name" v-on:change="setNewName($event.target.value)"/>
            <el-button type="primary" native-type="button" v-on:click="updateName">OK</el-button>
            <el-button type="primary" native-type="button" v-on:click="finishEdit">Cancel</el-button>            
        </template>
        <template v-else>
            <span v-on:click="nameClick">{{ name }}</span>
            <el-button type="primary" native-type="button" v-on:click="startEdit">rename</el-button>
        </template>
        </div>`,

ビルドしてみる。

実行するといちいちアニメーションするかっこいいボタンになった。 もちろん全部今まで通り動作する。

次は入力フォームも置き換えてみよう

<el-input placeholder="Please input"></el-input>

このようにするようだ。

移植するとこうなる

<el-input placeholder="Please input" v-bind:value="name" v-on:change.native="setNewName($event.target.value)"></el-input>

若干記述が違うが、これで元と同じ動きになった。