Vue.js 開発環境を手作りしてみた手順（自分メモ）

Vue.js の開発環境構築は、もっぱら vue-cli で "vue init webpack hogehoge" という方法が一般的ですが、最近 React から Vue に乗り換えた私は、「とりあえず最初は、開発環境を手作りしたい」とうか、そうしないとしっくりこないので、手探りながら一から構築してみた時のメモです。あくまでも自分用です。

概要

おおよその構成

Vue.js を利用したクライアントアプリのビルドに "webpack"、ES2015 のトランスパイラは "babel"、Vue コンポーネントファイルのビルドに "vue-loader" を導入する。その他 CSS のビルドや、静的なファイルコピー、アプリ実行用サーバも仕込む。あと、Eslint も設定してみた。

大まかな流れ

npm init で土台作り
Vue.js インストール
webpack 入れる
babel 導入
css-loader と style-loader 導入
copy-webpack-plugin 導入
webpack-dev-server で動かす
vue-loader 導入
eslint でコードチェック

Vue.js アプリ開発環境構築基礎編

基礎編は、vueコンポーネントファイルを用いない Vue.js アプリがビルドできる環境を構築する。

1) npm init で土台作り

最初に node をインストール。nodebrew を使用すると吉。
続いて、npm init で開発環境のベースを作る。

$ npm init

いろいろ対話するが、アプリ名とか適宜入力すればOK。

2) Vue.js インストール

作成したアプリのディレクトリに移動した上で、普通に Vue.js をインストール。

$  npm install --save vue

3) webpack を入れる

$ npm install --save-dev webpack

4) Babel を導入

# webpack から babel を利用する場合の基本モジュール
$ npm install --save-dev babel-loader babel-core

# ES2015 をトランスパイルするためのもの
$ npm install --save-dev babel-preset-es2015

babel の設定ファイル ".babel.rc" を作成

$ echo '{ "presets": ["react", "es2015"] }' > .babelrc
$ cat .babelrc

{ "presets": ["react", "es2015"] }

ここで、babel で js をトランスパイルするための webpack 設定をおこなう。

$ vim webpack.config.js

ここまでの webpack.config.js の中身は次のとおり。

var path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
};

ここで試しにサンプルアプリをビルドさせてみると、Vue.js のTemplateがコンパイルできないとかの以下のエラーがでた。

Vue warn: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

調査したところ、vue.js のビルドは、コンパイラ付のものを import する必要があるとのこと。解決するには、webpack.config.js にビルドの alias を追加すること。*1

ということで、webpack.config.js に下記の設定を追加。これで動作OK。

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  },

5) css-loader と style-loader 導入

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

webpack.config.js に下記の loader を追加。

module: {
  loaders: [
    ...
      // ここから
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ['style-loader', 'css-loader'],
      },
      // ここまで
    ],
  },

6) copy-webpack-plugin 導入

$ npm install -save-dev copy-webpack-plugin

webpack.config.js に copy-webpack-plugin の設定を追加。

  plugins: [ 
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'src', 'index.html'),
    }]),
  ],

7) webpack-dev-server で動かす

$ npm install -save-dev webpack-dev-server

またも webpack.config.js に設定を追加。

  devServer: {
    contentBase: 'public',
    port: 3000,
    host: 'localhost',
    historyApiFallback: true,
  },

"npm start" でアプリを動かせるように、package.json に次の設定を追加。

  "scripts": {
    "start": "webpack-dev-server", <--- 追加
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

ここまでのまとめ

ここまでで webpack.config.js は次のとおりとなりました。

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: /src/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'src', 'index.html'),
    }]),
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    },
  },
  devServer: {
    contentBase: 'public',
    port: 3000,
    host: 'localhost',
    historyApiFallback: true,
  },
};

Vue.js アプリ開発環境構築 vue ファイルビルド編

ここからは、さらに vueコンポーネントファイルを用いた Vue.js アプリもビルドできるように環境設定を追加する。

8) vue-loader 導入

vueコンポーネントファイルをビルドさせるには、 vue-loader が必要ということで、早速導入。

$ npm install -save-dev vue-loader

さらに vue-template-compiler がないとbuildでエラーとなるのでインストールする

$ npm install --save-dev vue-template-compiler

vue-loader の設定を webpack.config.js に追加。

  module: {
    loaders: [
      // ここから追加
      {
        test: /\.vue$/,
        exclude: /node_modules/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },
      // ここまで

9) eslint でコードチェック

Vue.js を利用したアプリでも eslint でリントチェックできるようにしてみる。最初は、eslint の基本設定。今回は対話で設定するケース。

$ eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JavaScript
Successfully created .eslintrc.js file in /Users/foo/bar/vue-sample/

これで ".eslintrc.js" が生成されるはず。ただしこのままでは、vue template がきちんとチェックできないので、eslint-for-vue を導入する。

$ npm install --save-dev eslint-plugin-vue@beta

.eslintrc.js に設定を追加。今回はこのような設定内容となりました。

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:vue/recommended" <--- eslint-for-vue の設定追加
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "vue/valid-v-if": "error" <--- eslint-for-vue の設定追加
    }
};

まとめ

今回作成した webpack.config.js はこちら

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public')
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        include: /src/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
        }
      },
      {
        test: /\.js$/,
        include: /src/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'src', 'index.html'),
    }]),
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    },
  },
  devServer: {
    contentBase: 'public',
    port: 3000,
    host: 'localhost',
    historyApiFallback: true,
  },
};

package.json はこうなりました。

{
  "name": "vue-tutorial01",
  "version": "1.0.0",
  "description": "Vue.js tutorial project",
  "author": "hoge hoge fuga fuga",
  "private": true,
  "main": "index.js",
  "license": "ISC",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "eslint": "^4.7.1",
    "vue": "^2.4.4"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.7",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^3.13.0",
    "file-loader": "^0.11.2",
    "style-loader": "^0.18.2",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

所感

なんというか、"vue init webpack-simple" で開発環境を構築した場合とほぼ同じような感じになってしまった。しかし、今回は自分の理解のために頑張ったということで良かろう。

次回からは、素直に "vue init webpack-simple" で環境構築することにしよう。

以上。

*1:本家の次の情報を参考にしました

インストール — Vue.js

概要