TypeScript+webpack環境を作る - babel使う版
TypeScriptをはじめてみる - コピペコードで快適生活 の続き
必要なライブラリをインストール
npm install --save-dev webpack webpack-cli typescript babel-loader @babel/core @babel/preset-typescript
- webpack:
- モジュールバンドラー。
- JavaScript等の複数のファイルを1つにまとめる。
- loaderを組み込むことで、まとめる前に変換処理(ES2015→ES5など)を加えることができる。
- webpack-cli:
- webpackのcli
- babel-loader:
- webpackにbabelの変換処理を組み込むloader
- babelは古いブラウザで動くJavaScriptに変換するツール群
- @babel/core:
- babelのコア機能
- @babel/preset-typescript
- TypeScript→JavaScriptの変換を行う
- babelでの変換処理本体は、プラグインとして提供される
- @babel/preset-env は最新のJavaScriptからの変換を行う
${APP_DIR}/package.json
の更新
scriptsにビルドコマンドを追加する
{ "scripts": { "watch": "webpack --watch", "build": "webpack --mode production" }, "devDependencies": { "@babel/core": "^7.14.8", "@babel/preset-typescript": "^7.14.5", "babel-loader": "^8.2.2", "typescript": "^4.3.5", "webpack": "^5.45.1", "webpack-cli": "^4.7.2" } }
${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 のファイルを loader: 'babel-loader', // babelでトランスパイルする options: { presets: ['@babel/preset-typescript'] }, 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