街撮りchの中のひとのブログ

npmとwebpackで作るVue.js、学習のためのいい感じのフロントエンド開発環境 2016年8月の場合。

目次

  1. 1. 必要なものあるかどうか確認
  2. 2. ファイル・フォルダ構成
  3. 3. package.json
    1. 3.1. パッケージの説明
  4. 4. package.jsonの中のscriptsで何をしているか
  5. 5. webpack.config.json
  6. 6. bs-config.json
  7. 7. サンプルのソースコード
    1. 7.1. language-vue-component

npm+webpack+vuejs

Vue.js

Vue.jsは日本語のドキュメントも整備されていて情報も多いので助かりますね。
でそのVue.js + webpackでいい感じの環境を作る必要があって用意してみました。

  • Vue.js
  • webpack
  • vue-router（あったほうが良さそうなので使います）
  • Babel（これもあったほうが良さそう的なので使います）
  • サーバーとのHTTP通信はjQueryを使います（元々プロジェクトに入っていたのでさらに追加するよりもいいだろうという判断です）

必要なものあるかどうか確認

1
node -v

まずはお決まりのNode.js入ってるか確認。

1
npm -v

npm（Node.jsのパッケージマネージャー）も入ってるか確認。

1
webpack -v

webpackも入っているか確認。
もし入ってなかったら

1
npm install -g webpack

-gオプションはGlobalオプションのこと。

ファイル・フォルダ構成

1
git clone https://github.com/shigekitakeguchi/npm-webpack-vuejs.git

https://github.com/shigekitakeguchi/npm-webpack-vuejs

GitHubから落として使ってください。
カスタマイズなりなんなりして。

1
cd npm-webpack-vuejs

落としたフォルダ内に移動する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── LICENSE
├── README.md
├── app
│   ├── index.html
│   └── scripts
│       └── bundle.js
├── bs-config.json
├── package.json
├── src
│   ├── components
│   │   └── app.vue
│   └── scripts
│       └── index.js
└── webpack.config.js

ファイル・フォルダ構成はこんな感じ。
LICENSEやREADME.mdはプロジェクトには直接はいらないファイルですね。今回は、わかりよいようにコンポーネントを使ったサンプルを入れてます。
「.vue」という珍しい拡張子のファイルがVue.jsのコンポーネントですね。説明はのちほど。

1
npm install

これで必要なパッケージがインストールされるはず。

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  "name": "npm-webpack-vuejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack -w",
    "lite": "lite-server",
    "start": "concurrently \"npm run lite\" \"npm run webpack\""
  },
  "keywords": [],
  "author": "shigeki.takeguchi",
  "license": "MIT",
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-preset-es2015": "^6.13.2",
    "concurrently": "^2.2.0",
    "css-loader": "^0.23.1",
    "lite-server": "^2.2.2",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.3",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.1"
  },
  "dependencies": {
    "jquery": "^3.1.0",
    "vue": "^1.0.26",
    "vue-router": "^0.7.13"
  }
}

中身はこんな感じ。 けっこういろいろはいってますね。

パッケージの説明

落としてきたpackage.jsonからインストールすればいいんですがそれぞれのパッケージの説明を。

1
npm install --save-dev babel

はい、Babelです。

1
npm install --save-dev babel-core

https://github.com/babel/babel/tree/master/packages/babel-core

言わずもがな、Babelのコンパイラのコア。

1
npm install --save-dev babel-loader

https://github.com/babel/babel-loader

webpackでES2015構文で書いたファイルをトランスパイルするのに必要。

1
npm install --save-dev babel-plugin-transform-runtime

未対応なブラウザでも動くように変換するやるらしいですね。
babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた

1
npm install --save-dev babel-preset-es2015

BabelでES2015を使うときに必要なやつです。

1
npm install --save-dev vue-loader

webpackでVue.jsを扱うようにするやつです。

1
npm install --save-dev concurrently

https://github.com/kimmobrunfeldt/concurrently

concurrentlyは複数のコマンド実行できるようにするため。具体的に何をしているかは後ほど説明。

1
npm install --save-dev lite-server

https://github.com/johnpapa/lite-server

webpackにもwebpack dev serverというのがあるみたいだけどlite-serverのがシンプルで良さそうなので使ってみた。
ただし設定ファイルは必要でした。

1
npm install --save-dev webpack

https://github.com/webpack/webpack

webpackですね。

1
npm install --save vue

Vue.jsです。HTMLでscriptタグで読み込むのではなくrequireで読み込めるようにするためですね。

1
npm install --save jquery

同じくjqueryもwebpack.ProvidePluginで設定して利用できるようにします。

1
npm install --save vue-router

vue-router.jsもrequireで読み込めるようにします。

package.jsonの中のscriptsで何をしているか

1
2
3
4
5
"scripts": {
  "webpack": "webpack -w",
  "lite": "lite-server",
  "start": "concurrently \"npm run lite\" \"npm run webpack\""
},
1
npm start

このコマンドでlite-serverを立ち上げwebpackでwatchを行いJavaScriptの変更を監視するようにしている。

1
"start": "concurrently \"npm run lite\" \"npm run webpack\""

scriptsの中にあるstartがこれにあたる。

1
npm run lite
1
npm run webpack

これらのコマンドはそれぞれ独立したコマンドですが、最初にちょっと触れたがconcurrentlyにダブルクオーテーションでくくってスペースで区切って引数で渡せば並行して実行することになる。便利。

1
"webpack": "webpack -w",

これはwebpackのwatch（監視）を走らせている。こちらも後ほど触れるがwebpack.config.jsonで記述されたことをもとに監視している。

1
"lite": "lite-server",

lite-serverを立ち上げている。bs-config.jsonに設定ないようを記述している（こちらも後ほど触れる）。

webpack.config.json

webpackの設定です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var webpack = require("webpack");

module.exports = {
  entry: './src/scripts/index.js',
  output: {
    path: __dirname + '/app/scripts',
    filename: 'bundle.js',
		publicPath: '/app/',
  },
  module: {
    loaders: [
      {
        test: /\.vue$/, loader: 'vue'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery'
    }),
    new webpack.optimize.UglifyJsPlugin(),
  ]
}

entryにもとファイル（複数ある場合は配列で持たせる）。outputに出力される設定を記述。今回はbundle.jsっていう一般的によく使われているらしい名称のまま。
けっこうシンプルですね。 依存するパッケージがいろいろあってエラーが出てインストールする感じでした。うーん。

1
npm install --save-dev css-loader
1
npm install --save-dev vue-style-loader

このふたつのパッケージは「.vueファイル」（コンポーネント化したファイル）でCSSを記述するのでそのために必要ってことですね。

1
npm install --save-dev vue-html-loader

これも「.vueファイル」（コンポーネント化したファイル）でHTMLを記述するのでそのために必要ってことです。

bs-config.json

1
2
3
4
5
6
{
  "injectChanges": "true",
  "files": ["./app/**/*.{html,htm,css,js}"],
  "watchOptions": { "ignored": "node_modules" },
  "server": { "baseDir": "./app" }
}

lite-serverの設定はドキュメントルートをappの直下にしたかったのと監視対象のファイル（html、css、js）が変更されたらリロードしてinjectChangesというBrowsersyncを動すため。

サンプルのソースコード

Vue.jsを使った大規模開発に必要なもの

このページを参考にHello Worldしました。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>npm Webpack Vue.js</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
    <script src="/scripts/bundle.js"></script>
  </body>
</html>

app/index.htmlです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
  module.exports = {
    data: function() {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

src/app.vueです。styleとhtmlとscriptsがひとつになってるのでキモい人にはキモいかもですが考え方を変えればわかりやすいですね。好みの別れるところでしょうが。。。

language-vue-component

CYBAI/language-vue-component

あとAtomでvueのコンポーネントをシンタックスハイライトしてくれるパッケージです。

1
2
3
4
5
6
7
8
9
10
11
12
13
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
var appComponent = Vue.extend(require('../components/app.vue'));

var App = Vue.extend({});
var router = new VueRouter();

router.map({
  '/': { component: appComponent}
})

router.start(App, '#app');

routerを使ってコンポーネントapp.vueを呼び出します。 成功すると赤い文字で「Hello world!」と表示されます。

Vue.jsは軽量で扱いやすいMVVMフレームワークですね。
Riot.jsの方が新しくてここのところ注目されているらしいですがVue.jsは日本語ドキュメントが充実していて情報も豊富なので入門しやすいのが特徴ですね。

いつもvブログを読んでいただきありがとうございます。
YouTubeチャンネルの運用を続けていくために機材購入、資料購入などで困っております。
よろしければAmazonの欲しいものリストから応援いただけると助かります。

街撮りchの欲しいものリスト
街撮りchをPayPal.Meで応援する
ペイパル｜銀行決済も手数料0円、カードのポイント貯まる｜VISA,Mastercard,JCB,American Express, 銀行

管理人：タケグチシゲキ

フロントエンドエンジニアとして働く55歳のジジイです。
首都圏を中心に散歩動画を撮影してYouTubeで配信してます。現在は夜の街のネオンや光が作り出す陰影が好きで撮影することが多いです。

YouTbueチャンネル

街撮りch - machidori.channel

YouTubeチャンネルもぜひご覧ください。思い出の街や気になる街の風景を楽しんでいただければと思います

X（旧Twiiter）

@shigektakeguchi

X（旧Twiiter）でも情報発信しております。よろしければフォローいただけると嬉しいです

記事や動画について知っている情報を教えていただけると幸いです。どんなささいなことでも大丈夫です。

また、仕事依頼、コラボ依頼、著作物の提供などについてのお問い合わせは下記のお問い合わせフォーム、X（旧Twiiter）のDMでお待ちしております

お問い合わせ

ブログ記事やYouTubeチャンネルの動画に関するコメント、お仕事依頼、コラボ依頼、著作物の提供についてなどなどお問い合わせにて随時募集中です。
情報提供などもお待ちしております。

お問い合わせはこちらのGoogleフォームからお願いいたします

最近の更新：

タグ：