はじめに
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が出力されます。
以上です！