🎃

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

2021/08/11に公開2件

TypeScript

old

tech

手順メモ

前提

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

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

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

typescript→javascript 準備

tsconfig.json 編集

tsconfig.json

{
  "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 編集

webpack.config.js

// 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 に以下を加えます。蛇足ですが、カンマ等にはお気を付け下さい。

webpack.config.js

// 追加
  resolve: {
    extensions: ['.ts', '.js'],
  },

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

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