[webpackレシピ] その1: TypeScriptに対応する

公開日:2019-05-10
最終更新:2019-05-10

この記事について

webpackの使い方について、細かく少しずつ書いていく連載記事です。
今回は、個人的に今勉強中のTypeScriptにとりあえず対応します。

過去のwebpack関連の記事は以下。

手順

必要なモジュールをインストールする

$ yarn add --dev typescript ts-loader  

typescript

TypeScriptの本体です。当然必須です。

ts-loader

TypeScriptをwebpackで読み込むためのloaderです。

webpack.config.jsを変更する

webpack.config.jsmodule.rulesの値を追加します。

module.exports = {  
  module: {  
    rules: [  
      {  
        test: /\.ts$/,  
        loader: 'ts-loader',  
      },  
    ]  
  },  
  resolve: {  
    extensions: ['.js', '.ts']  
  },  
};  

tsconfig.jsonを設置する

tsconfigが無いとエラーになります。

[./src/index.ts] 251 bytes {main} [built] [failed] [2 errors]  

ERROR in [tsl] ERROR  
      TS18002: The 'files' list in config file 'tsconfig.json' is empty.  

ERROR in ./src/index.ts  
Module build failed (from ./node_modules/ts-loader/index.js):  
Error: error while parsing tsconfig.json  

当然といえば当然ですが、TypeScriptのコンパイルには必須なので設置します。
tsconfig.jsonの内容については本稿では扱いません。

{  
  "compilerOptions": {  
    "target": "es2017",  
    "module": "es2015",  
    "moduleResolution": "node",  
    "sourceMap": true,  
    "declaration": false,  
    "strict": true,  
    "noImplicitAny": true,  
    "noImplicitThis": true,  
    "alwaysStrict": true,  
    "esModuleInterop": true,  
    "experimentalDecorators": true  
  }  
}  

実行のサンプル

src/index.tsを以下の内容で設置します。

const foo:string = "bar";  

console.log(foo);  

前回と同様に、以下のコマンドを実行します。

$ yarn webpack --mode=development --devtool=false  

実行すると、dist/main.jsには以下のような内容で出力されます。

/***/ (function(module, exports, __webpack_require__) {  

"use strict";  

const foo = "bar";  
console.log(foo);  


/***/ })  

正常にJavaScriptに変換されました。

loaderとは

webpackは、そのままではJavaScriptしか読み込めず、TypeScriptのファイルであってもJavaScriptとして認識してしまいます。
しかし、webpackは数々のloaderを使うことであらゆるフォーマットをJavaScriptとして扱うようにすることができます。

公式リンク: https://webpack.js.org/concepts/loaders/

試しに、今回webpack.config.jsに追加した内容をしないと、以下のようなエラーが発生します。

[./src/index.ts] 181 bytes {main} [built] [failed] [1 error]  

ERROR in ./src/index.ts 1:9  
Module parse failed: Unexpected token (1:9)  
You may need an appropriate loader to handle this file type.  
> const foo:string = "bar";  
|   
| console.log(foo);  
error Command failed with exit code 2.  

loaderは、拡張子(ファイル名)ベースでそれぞれ割り当てます。
今回は、test/\.ts$/と書いているので、末尾が.tsの拡張子にのみts-loaderが適用され、
TypeScriptとして読み込まれるようになります。

resolveとは

webpack.config.jsに追加したresolve.extensionsは、
JavaScript内部でimportする際に省略できる拡張子を指定します。

公式: https://webpack.js.org/configuration/resolve/

指定しない場合、

import MyModule from './MyModule.ts';  

このようにファイル名を全て指定すれば普通に読み込めますが、resolveに拡張子を追加することで、

import MyModule from './MyModule';  

このように、JavaScriptと同じように読み込めるようになります。

まとめ

  • webpackは基本的にJavaScriptをbundleする機能だけであり、TypeScriptなどに対応するにはLoaderを使うことになる
    • TypeScriptの読み込みにはts-loaderを使う
  • Loaderを使うことで、JavaScript以外のいろんなものをJavaScriptと同じように使うことができる
    • cssやjsonも読み込めるし、画像やHTMLやVueのコンポーネントも扱えるようになる
記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
選択肢が少ないということは幸せなことなんだよ。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする