webpack+Babel+TypeScript の開発環境を構築 – 自動polyfillで手軽にIE対策

オウルです。

例えば最新の ECMAScript バージョンの学習であれば、レガシーブラウザ(IE 11など)は無視しても良いと思いますが、Production となると話は別です。まだまだ、IE ユーザは健在ですし、IE で動作することが要件となることも事実です。

しかし、実装を IE 11 にあわせるとなると ES2015 すら使えません。そこで、活躍するのが、webpack + Babel + TypeScript の開発環境です。

TypeScript は静的型付け、最新の ECMAScript での実装と javascript のトランスパイル。そして、Babel はレガシーブラウザで動作するように トランスパイル + polyfill(今回は 自動 polyfill 目的で使用)。最後に webpack でバンドル。それでは、webpack + Babel + TypeScript の開発環境の構築を進めていきます。

前提条件
  • Visual Studio 2019(ASP.NET Core MVC を使用)
  • npm インストール済
Node.js をインストールすると npm も同時にインストールされます。

パッケージ管理

package.json の初期化

プロジェクトファイル(.csproj)がある階層に移動してコマンドを実行します。

パッケージ インストール

パッケージのバージョンリスト

package.json

各パッケージインストール後の package.json は次のようになります。

さらに、公開はしないので “private”: true の項目を追加します。

今回は WebPack Task Runner を使用しますが、以下のコマンドで実行できます。

TypeScript

tsconfig.json を作成します。プロジェクト右クリック/追加/新しい項目/ASP.NET Core/Web/TypeScript JSON 構成ファイルを選択します(デフォルトで名前は tsconfig.json になっているはずです)

tsconfig.json の設定を変えて単体で動確したいので、次のようにカスタマイズします。

tsconfig.json

compileOnSave

Visual Studio を使用していると、ファイル保存時に自動で “outDir” に js が生成されます。

target

ECMAScript バージョンを指定します。指定したバージョンで js が生成されます。

lib

コンパイルに含めるライブラリのファイルの一覧を指定します。例えば、target: es5 を指定すると、実装で Promise を使うとコンパイルエラーになりますが、 lib を指定することにより制御できます。

省略した場合
target: ES5 lib: DOM,ES5,ScriptHost
target: ES6 lib: DOM,ES6,DOM.Iterable,ScriptHost

downlevelIteration

target: es5 を指定した場合に、実装で例えば for..of を使うとコンパイルエラーになりますが、true にすることで iterables をサポートしてくれます。

outDir

js の出力先を指定します。

include

コンパイル対象を指定します。

Babel

Babel 7.4 から @babel/polyfill が非推奨になり、core-js のバージョンを指定して直接 polyfill を読み込む方法になっています。

tsconfig.json と同様の手順で babel.config.js を作成します。

babel.config.js

@babel/preset-env

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

targets

アプリがサポートする環境を指定します。ここでは、browserslist のクエリ構成で指定しています。https://browserl.ist/ で対象ブラウザを確認できます。

useBuiltIns

useBuiltIns: “usage” は、各ファイルで必要な polyfill のみ追加します。

window.fetch polifill

window.fetch is not a cross-platform feature, in some environments, it makes no sense. For this reason, I don’t think it should be in core-js. Looking at a large number of requests it might be added in the future. Now you can use, for example, this polyfill.

と core-js の説明にあったので window.fetch polyfill を使用します。

webpack

At its core, webpack is a static module bundler for modern JavaScript app lications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

モジュールバンドラーです。前回の記事のパフォーマンス改善の解決策の1つですね。

webpack.config.js

webpack.config.js を次のようにカスタマイズします。

WebPack Task Runner

Visual Studio Marketplace から WebPack Task Runner をダウンロードします。Adds support for WebPack in Visual Studio 2015 and 2017’s Task Runner Explorer とありますが、まぁ 2019 でも大丈夫だろということでインストールです。

Task Runner

タスクランナー エクスプローラーにある [Run – Development] を実行すると、webpack.config.jsoutput で指定したフォルダに main.bundle.js が生成されます。そして tsconfig.json で指定した “outDir” のフォルダを確認すると、es5構文(機能は polyfill)で js ファイルが正常に(コンパイルエラーになることなく)生成されています。

IE 11 で動確

IE 11 で動確するために、前回記事 ↓ のビューとスクリプトを変更します。

動確の準備

Index.cshtml

Main.ts

次は動的インポートの実装から fetch を使用した実装に変更します。

IE 11 でデバック実行

デバック実行前に Main.ts を変更したため、再度タスクランナーを実行します。

IE 11

IE 11で実行

google developer tools

バンドル

バンドルされているため 1 ファイルで、且つ IE 11 で正常に表示され、動作しています。素晴らしい!満足です。Production は minify するべきですが、それはまたの機会に。

 

より実践で役立つ 「Visual Studio Code で TypeScript をデバッグ(using TypeScript babel webpack)」を ↓ で紹介しています。

↓ TypeScript と一緒に javascript の理解も深めよう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA