TypeScript + Vue.js + Webpack の環境構築でクッソはまらないように(TypeScript導入まで)
はじめに
TypeScript + Vue.js を使って何かアプリを作ってみたいと思ったのですが、環境構築でくっそハマったので、僕のような被害者を出さないように久しぶりに筆をとった次第です。
環境は、以下の通りです。
- centOS 7.3.1611
- Node.js 8.9.4
- npm 5.3.0
- TypeScript 2.7.1
- Vue.js 2.5.13
- webpack 3.11.0
- webpack-dev-server 2.11.1
したいこと
- TypeScript でコーディング
- Vue.js を使う
- webpack でビルドする
- webpack-dev-server を導入
(ソースの変更時に自動コンパイルしてくれるようにする) - vue.jsの公式ガイドをTypeScriptでできるようにする!
環境構築
の前に
まず、node.jsをインストールしておきます。
ここは、検索すれば詳しい解説がいくらでも見つかるので割愛。
コンソールで node -v
を叩いてバージョンが表示されればインストールできています。
node.js をインストールするとパッケージマネージャの npm も一緒にインストールされているはずなので、そちらも確認しておきましょう。
[vagrant@localhost ~]$ node -v v8.9.4 [vagrant@localhost ~]$ npm -v 5.6.0
TypeScript の導入
ではTypeScriptを導入していきます。
まずプロジェクト用にディレクトリを作ります。
[vagrant@localhost ~]$ mkdir test_ts [vagrant@localhost ~]$ cd test_ts/
作成したディレクトリに移動したらコンソールで npm init
を叩いて package.json を作成します。
色々と聞かれますがとりあえず、全てyesでいいです。
次に、npmでローカル環境にTypeScriptをインストールします。
[vagrant@localhost test_ts]$ npm i -D typescript npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN test_ts@1.0.0 No description npm WARN test_ts@1.0.0 No repository field. + typescript@2.7.1 added 1 package in 0.782s
package.json をちゃんと書きなさいよという警告が出ていますが、無視します。
i
は install
の略、 -D
は --save-dev
の略で、package.json の "devDependencies" にインストールしたモジュールが追加されます。
開発用に使うツール等は -D
を指定してインストールするらしいです。
インストールができたら、$(npm bin)/tsc --init
で tsconfig.json を作ります。
ローカール環境にインストールしたバイナリにはパスが通っていないのでインストール場所を$(npm bin)/
で指定してやります。
できた tsconfig.json にTypeScriptをJavaScriptにトランスパイルする際の設定を書きますが、今はそのまま触らずにおきます。
これでTypeScriptが使えるようになりました。
早速使ってみましょう。
test_ts配下にmain.jsというファイルを作り、以下のようなコードを書いてみます。
let msg: string = 'Hello World!'; console.log(msg);
tsファイルをjsファイルにトランスパイルするにはtsc
コマンドを使います。
[vagrant@localhost test_ts]$ $(npm bin)/tsc main.ts
main.jsができたら中を確認してみます。
var msg = 'Hello World!'; console.log(msg);
ちゃんとトランスパイルされていますね。
TypeScriptの導入はこれでokです。
思いの外長くなってしまったので一旦切ります。