TypeScript+webpack環境を作る - ts-loader使う版
https://kinosuke.hatenablog.jp/entry/2021/07/23/165039 のやりなおし。 babelはTypeScriptからJavaScriptへの変換だけをやってくれるだけで、肝心の型チェックはやってくれなかったので、ts-loaderを使ってやってみる。
必要なライブラリをインストール
npm install --save-dev webpack webpack-cli typescript ts-loader
- webpack:
- モジュールバンドラー。
- JavaScript等の複数のファイルを1つにまとめる。
- loaderを組み込むことで、まとめる前に変換処理(ES2015→ES5など)を加えることができる。
- webpack-cli:
- webpackのcli
- ts-loader:
- webpackにTypeScriptの変換処理を組み込むloader
${APP_DIR}/package.json
の更新
scriptsにビルドコマンドを追加する
{ "scripts": { "watch": "webpack --watch", "build": "webpack --mode production" }, "devDependencies": { # 略 } }
${APP_DIR}/tsconfig.json
の作成
TypeScriptをどのように変換するかを設定する
{ "compilerOptions": { "sourceMap": true, "target": "ES5", // TSはECMAScript 5に変換 "module": "ES2015" // TSのモジュールはES Modulesとして出力 } }
- CommonJSのモジュール:
- require/module.exportsで外部JSファイルを扱う
- Node.jsが採用している
- tsconfig.jsonのデフォルト
- ES Modules:
- import/exportで外部JSファイルを扱う
- ES2015が採用している
- webpackのTree Shaking(未使用のimportを振り落とす)が効く
${APP_DIR}/webpack.config.js
の作成
webpackのバンドル設定を行う
const path = require('path') module.exports = { // production: 改行やインデントを削除してJSファイル出力 // development: ソースマップ有効でJSファイル出力 // ただし `webpack --mode production` したときは production が有効になる mode: 'development', // 入力元の指定 entry: { index: path.join(__dirname, '/src/index.ts'), }, // 出力先の指定 output: { path: path.join(__dirname, 'dist'), filename: '[name].js', }, module: { rules: [ { test: /\.ts$/, // 拡張子 .ts のファイルを use: 'ts-loader', // ts-loaderでトランスパイルする exclude: /node_modules/, // ただし外部ライブラリは除く }, ], }, // import './MyLib.ts' が // import './MyLib' の書き方でOKになる resolve: { extensions: [ '.ts', '.js', ], }, };
tsファイルを書いてみる
${APP_DIR}/src/index.ts
import { Animal } from './Animal'; let animal = new Animal("cat", "pipimi"); animal.say();
${APP_DIR}/src/Animal.ts
export class Animal { animaltype: string; name: string; constructor(animalType: string, name: string) { this.animaltype = animalType; this.name = name; } say() { console.log(`Hello. I am ${this.name} of ${this.animaltype}.`); } }
ビルドする
npm run build