TypeScriptをコンパイルしてwebpackで一つにまとめる

投稿日 編集日 カテゴリ

手順メモ

前提

ディレクトリ名 用途
./src ソースディレクトリ
./build ts -> js にトランスパイルされたものを仮置きするディレクトリ
./public/lib/ 実際にブラウザが読み込む js を置くディレクトリ

必要なものをインストール

  • npm i typescript -g
  • npm i webpack -g
  • npm i webpack-cli -g

typescript→javascript 準備

tsconfig.json 編集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "compilerOptions": {
	  "experimentalDecorators": true,
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "./build/",         ※ ここだけ直す
    "sourceMap": true,
    "strict": true,
    "target": "es2017"
  },
  "compileOnSave": true,
  "include": [
	"src",
  ]
}

テスト

src に適当に index.ts のようなファイルを置いて、 tsc を実行する。

./build/index.js が出来ていれば OK。複数ファイル置いても全部トランスパイルされることを

確認する。

javascript を 1 ファイルにパックする

webpack.config.js 編集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// output.pathに絶対パスを指定する必要があるため、pathモジュールを読み込んでおく
const path = require('path');

module.exports = {
  // development or production。
  mode: 'development',
  resolve: {
    alias: {
      // vue はフルコンパイラー入りが必要
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  },
  // エントリーポイントの設定
  entry: './build/index.js',
  // 出力の設定
  output: {
    // 出力するファイル名
    filename: 'index.js',
    // 出力先のパス
    path: path.join(__dirname, './public/lib')
  }
};

テスト

webpack を実行すると ./public/lib/index.js が出力されることを確認する。

蛇足

一番書きたかったのはここ

変更したらいちいち手動でコンパイルするの？

少しの間手動でやっていたのですが面倒過ぎます。

なのでどうにかしようと思います。…ファイルの変更を監視するオプションは tsc にはありません。

webpack にはあります。と言うことは、 typescript のトランスパイルも webpack にやって貰う必要があります。

webpack 用 ts-loader をインストール

  • npm i ts-loader --save-dev
  • npm i typescript --save-dev

webpack で typescript をトランスパイルする設定

webpack.config.js に以下を加えます。蛇足ですが、カンマ等にはお気を付け下さい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 追加
  resolve: {
    extensions: ['.ts', '.js'],
  },

// 追加
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {loader: 'ts-loader'}
        ]
      }
    ]
  }

// 変更。tscによりトランスパイルされたjsではなく、tsを直接見る
  //entry: './build/main/main.js',
  entry: './main/main.ts',

webpack によるトランスパイルテスト

webpack で、トランスパイルまで行われることを確認する。

tsc + webpack と出力は変わらない。

ソース変更を監視させる

webpack --watch

これでソースの変更を監視して自動でトランスパイル等をやってくれるようになる。

vue cli で作ったプロジェクトを webpack でやろうとしたらコケた

  • @Prop() private msg!: string;
  • TS6133: ‘msg’ is declared but its value is never read.

private ではなく、protected にすればよい。