最小構成のvue.jsの環境をvue cli使わずに構築する #TypeScript

はじめに

vue cliは便利なんですが、どういう処理されてるのかがブラックボックス化されてしまうので、基本はすべてスクラッチで必要なものを書いていくスタイルで環境構築をしてみました。そのときの手順をまとめています。

プロジェクトのディレクトリを作成する

$ mkdir simple-vue
$ cd simple-vue

最初に必要なパッケージをインストールする

$ npm init
$ npm i -D vue typescript webpack webpack-cli ts-loader

npm init も package.json を自分でつくればいいんですが、バージョンなど書くのが面倒なので、ここだけnpmコマンドでサボってしまいました。

インストールしたパッケージは下記です。

vue
- Vue.js本体です
typescript
- TypeScriptで書かれたファイルのコンパイラです
webpack、webpack-cli
- vueをブラウザで表示できるようにするためのモジュールバンドラーです
ts-loader
- webpackからtypescriptファイルをコンパイルします

$ ls
node_modules        package-lock.json   package.json

うん、シンプルでいいですね。ここから、必要なファイルなどをつくっていきます。

webpackの設定をする

webpack.config.jsを simple-vue/直下に作成します。

$ touch webpack.config.js
$ vi webpack.config.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}

webpackは3系と4系で書き方が変わるので要注意です。これは4系での書き方です。

TypeScriptの設定をする

webpack.config.jsと同じくtsconfig.jsonを simple-vue/直下に作成します。

$ touch tsconfig.json
$ vi tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["dom", "es5", "es2015.promise"]
  }
}

index.htmlをつくる

vue.jsのspaのindex.htmlをつくります。

$ touch index.html
$ vi index.html

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Simple Vue</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

TypeScriptのエントリーファイルをつくる

TypeScriptのファイルをつくります。

$ mkdir src
$ touch src/index.ts
$ vi src/index.ts

index.ts

import Vue from 'vue'

let app:Vue = new Vue({
  el: '#app',
  render: (h)=>h('p', 'Hello, world.')
});

webpackを実行

webpack実行したときに、./dist配下にjsファイルを出力させるためにディレクトリをつくっておきます。

$ mkdir dist
$ $(npm bin)/webpack
Hash: de7f2490defacf8571ad
Version: webpack 4.19.1
Time: 1098ms
Built at: 2018/09/21 12:56:49
    Asset      Size  Chunks             Chunk Names
bundle.js  65.4 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] (webpack)/buildin/global.js 489 bytes {0} [built]
[2] ./src/index.ts 124 bytes {0} [built]
    + 4 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

これで、./dist/bundle.jsがつくられます。

表示

ブラウザで、simple-vue/index.html を開くと、Hello Worldが出力されます。

以上です！