【webpack / gulp超初心者入門】とりあえず一緒にvue.jsでも用意してみようぜ！！

17309 ワード
YARN npm Vue.js gulp webpack npm テキストリンク

はじめに

jsのバージョン管理！
npm install！！
はい、node_modulesフォルダ配下にデータが入りました～～！

……で？？？？？

だから何やねん！！
そっからどう使うねん！！

そんなフロントエンド初心者がとうとうwebpackの勉強をはじめました。

ゴール

vue.jsの「単一ファイルコンポーネント」が動くところまでやっていきたいと思います。

前準備

私はWindowsで環境を準備しますが、
Mac Loveな方は適宜Macのコマンドに置き換えてください。

プロジェクトフォルダの準備

ひとまずtestフォルダを作成。
その後、その中にindex.htmlを用意します。
ここで作業を行っていこうと思います。

npmを準備

npmはなんかJavaScriptのバージョン管理ツールらしいです。
brewとかyumとかapt-getとかchocoみたいな感じかな。

ひとまず準備します。

Windowsの方はChocolatey、
Macの方はHome Brewを準備します。

この辺は適当にググればわかりやすい参考サイトがあるので割愛します。
Chocolateyでのnpmの準備は、私の記事を参考に入れていただいても大丈夫です。

その後、Node.jsを入れればnpmも一緒に入るかとおもいます。

yarnの準備

npmでinstallコマンドを叩くより、yarnというものを使えば早く可愛くフレンドリーにパッケージを入れてくれるので、
それも準備します。

コマンドプロンプトを「管理者で実行」します。
そして以下のコマンドを叩きます。

choco install yarn

gulpの準備

コンパイル処理とかを助けてくれる便利屋さんの「gulp」を導入します。
Windowsの場合、グローバルに入れなければ実行できないのでグローバルに入れます。

npm install -g gulp

↑これでgulpが入ります。

gulp -v

↑これを叩いて、バージョンが表示されたらOK

必要なパッケージを入れる

ごそっと入れていきましょう！

yarn add -y gulp gulp-rename gulp-uglify webpack-stream webpack gulp-concat gulp-vueify vue

↑これを叩くとnode_modulesフォルダが作成され、
その中に色々入っていきます！

何を入れたか。

  • gulp .... いろいろタスクを自動化してくれる便利なやつ
  • gulp-rename .... ファイル名をリネームして出力するためのやつ
  • gulp-uglify .... JS（JavaScript）を圧縮（ミニファイ）してくれるやつ
  • webpack-stream .... Webpackの処理をストリーミングで実行してくれるやつ
  • webpack .... WebPack本体
  • gulp-concat .... 複数のファイルを一つのファイルに結合してくれるやつ
  • gulp-vueify .... Vueの単一コンポーネント用ファイルを、JSファイルにコンパイルしてくれるやつ
  • vue .... vue.js本体なやつ

ってな感じです。

webpack.config.jsの作成

「webpack.config.js」を以下の内容で作成します。
ファイルを置く場所は、ディレクトリのトップです。

const path = require('path');

// Webpack化して出力する設定
module.exports = {
    // モード値を production に設定すると最適化された状態で、
    // development に設定するとソースマップ有効でJSファイルが出力される
    mode: "production",

    // コンパイル元
    entry: path.resolve(__dirname, "resources/js/app.js"),
    // コンパイル先のファイル名
    output: {
        filename: "[name].js",
    },
    // vuejsの単一ファイルコンポーネント用のコンパイル処理をやるやつ
    resolve: {
        alias: {
            'vue$': 'node_modules/vue/dist/vue.common.js'
        }
    }
}

app.jsの準備

コンパイル対象のapp.jsを準備します。
コヤツにコンパイルしたい内容を書いていくことになります。

場所は上のwebpack.config.jsで指定した、resources/js/app.jsに作りましょう。

ファイルの中身は以下のようにします。

// 今自分のいる場所からのvue.jsまでのパス
import Vue from '../../node_modules/vue/dist/vue.js'

// コンポーネント登録
import MyComponent from './my-component.js';

// 今回使う単一ファイルコンポーネントの設定
Vue.component('my-component', MyComponent);

new Vue({
    el: '#my-component',
    components: {
        MyComponent
    },
    template: '<my-component></my-component>'
});

「my-component」の準備

テスト用のvueの単一ファイルコンポーネントを作成しましょう！
ファイルの場所はresources/vue/my-component.vueにしてみます！

<template>
    <div>A custom component!!!</div>
</template>

gulpでコンパイルを行う準備

gulpfile.jsというファイルを作成します。
場所はディレクトリのトップです。

const gulp = require('gulp');
const webpackStream = require("webpack-stream");
const webpack = require("webpack");
const vueify = require('gulp-vueify');


// webpackの設定ファイルの読み込み
const webpackConfig = require("./webpack.config");

gulp.task('default', function () {
});

// task
gulp.task('jsmin', function () {
    // 設定ファイルで指定してあるデータをコンパイルして、吐き出す
    return webpackStream(webpackConfig, webpack)
        .pipe(gulp.dest("public/js/dist/"));
});


gulp.task('vueify', function () {
    return gulp.src('resources/vue/*.vue')
        .pipe(vueify())
        .pipe(gulp.dest('resources/js/'));
});

gulp.task('watch-js', function () {
    // JSが変更されたとき
    gulp.watch('resources/js/*.js', ['jsmin']);
});

gulp.task('watch-vue', function () {
    // vueが変更されたとき
    gulp.watch('resources/vue/*.vue', ['vueify']);
});



// デフォルト実行対象
gulp.task('default', ['watch-css', 'watch-vue', 'watch-js']);

index.htmlの作成

vue.jsの内容を表示するindex.htmlを作成します。
場所はディレクトリのトップです。

<html>
<head>
    <meta charset="utf8">
</head>
<body>

<!-- 今回作るvue.jsの単一ファイルコンポーネントの中身が表示される場所 -->
<div id="my-component"></div>

<!-- 今回作るvue.jsの単一ファイルコンポーネントとvue.jsをあわせたもの -->
<script src="public/js/dist/main.js"></script>

</body>
</html>

gulpで単一ファイルコンポーネントをコンパイル！

my-component.vueなどの、「.vue」ファイルは、ブラウザではJavaScriptで有ることが認識できません。
なので、正規のJavaScriptにコンパイルしてあげましょう。

gulpfile.jsファイルで定義した以下のコマンドを実行します。

gulp vueify

いろいろ文字がコマンドプロンプトに出たあと、
resources/js/配下にmy-component.jsというファイルが出来上がるかと思います。

中身は純粋なJavaScriptですね。

gulpでvue.jsとmy-component.jsをまとめてしまう

さて、せっかくなのでmy-component.jsとvue.jsを一つのJSファイルに纏めて、
HTML側から一つ呼び出せば使えるようにしてしまいましょう！

gulpfile.jsファイルで定義した以下のコマンドを実行します。

gulp jsmin

すると、public/js/dist/配下にmain.jsというファイルが出来上がると思います。

コヤツにすべてのデータが入っているわけですね！

index.htmlにアクセスしてみる

↑my-component.jsで定義した文言が正常に出力されています！
できたぜ！！

まとめ

Riot.jsのほうが楽でいいね！（

参考

宣伝

個人ブログやってます！
ちょっとギークな内容をまとめたりしてるので、ご興味のある方はぜひ！
https://nnahito.com/