webpackでtypescriptをtranspileする
2022/04/02
みなさんtypescriptの実行はどのようにされていますか？
ts-nodeでそのままtypescriptを実行しても良いですが、jsファイルに変換しておくと（ブラウザで実行できたり）色々な場面で便利です。
そこで今回は、webpackで手っ取り早くtypescriptファイルをjsファイルにtranspileする方法を簡単に紹介します。
webpackとは？
webpackは複数のファイルをtranspileしつつ、いい感じに1つのファイルにまとめてくれるモジュールバンドラーです。
typescriptのtranspileにはデフォルトでtscが使用できますが、ES Modulesのimport exportに対応できないため、一般的にはwebpackを使う場合が多いです。
方法
必要なpackageのインストール
webpackの実行に必要なpackageをインストールします。
$ yarn add -D webpack webpack-cli ts-loader typescript- webpack:
webpack本体 - webpack-cli:
コマンドラインでwebpackを実行するためのライブラリ - ts-loader:
webpack使用時のtypescriptのtranspileを行うライブラリ - typescript
typescript本体
webpackのconfigファイルを用意
webpack.config.js
const path = require('path');
module.exports = {
// developmentに設定するとソースマップ有効でjsが出力され、
// productionに設定すると最適化された状態でjsが出力される
mode: 'production',
// transpile対象のtypescriptファイルをここで指定
entry: './index.ts',
// output先の指定
output: {
path: path.join(__dirname, 'build'),
filename: 'index.js'
},
module: {
// 拡張子が.tsで一致するファイルをts-loaderでtranspileする
rules: [{
test: /\.ts$/,
use: 'ts-loader'
}]
},
// .tsファイル内のimport文を解決するため、node_modules内も対象とする
resolve: {
modules: [
'node_modules',
],
extensions: [
'.ts',
'.js'
]
}
};CLIでtranspile, bundle実行
$ npx webpack --config webpack.config.jsでindex.tsがtranspileされ、build/index.jsファイルが出力されます。
上記のコマンドはnpmスクリプトに記載しておくと便利です。
package.json
...
"scripts": {
"build": "webpack --config webpack.config.js"
},
...補足：複数のtsファイルをtranspileしたい場合
上記はindex.tsファイル1つをtranspileしたい場合の例ですが、複数のtsファイルをtranspileしたい場合はwebpack.config.jsを
webpack.config.js
...
entry: {
file1: './file1.ts',
file2: './file2.ts',
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
},
...とすれば、file1.js, file2.jsが出力されます。
