webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます

webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます

TypeScript バンドル

webpack 統合

通常、実際の開発では、ビルド ツールを使用してコードをパッケージ化する必要があります。

TS はビルドツールと組み合わせて使用​​することもできます。以下では、webpack を例に、TS をビルドツールと組み合わせて使用​​する方法を紹介します。

手順は次のとおりです。

プロジェクトを初期化する

プロジェクトのルートディレクトリに入り、 npm init -yコマンドを実行してpackage.jsonファイルを作成します。

ビルドツールをダウンロードする

コマンドは次のとおりです。

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

合計 7 つのパッケージがインストールされました:

  • webpack: ビルドツール webpack
  • webpack-cli: webpack のコマンドライン ツール
  • webpack-dev-server: webpack 開発サーバー
  • タイプスクリプト: ts-compiler
  • ts-loader: ts ローダー。webpack で ts ファイルをコンパイルするために使用されます。
  • html-webpack-plugin: webpack の html プラグイン。html ファイルを自動的に作成するために使用されます。
  • clean-webpack-plugin: 各ビルドの前にディレクトリをクリーンアップする webpack のクリーンアップ プラグイン

webpackを設定する

ルート ディレクトリに webpack 構成ファイルwebpack.config.jsを作成します。

定数パス = require("パス");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

モジュール.エクスポート = {
   最適化:
       最小化: false // コード圧縮をオフにする(オプション)},

   エントリ: "./src/index.ts",

   開発ツール: "インラインソースマップ",

   開発サーバー: {
       コンテンツベース: './dist'
   },

   出力: {
       パス: path.resolve(__dirname, "dist"),
       ファイル名: "bundle.js",
       環境:
           arrowFunction: false // webpack の矢印関数をオフにします (オプション)}
   },

   解決する: {
       拡張子: [".ts", ".js"]
   },

   モジュール: {
       ルール:
           {
               テスト: /\.ts$/,
               使用: {
                   ローダー: "ts-loader"     
               },
               除外: /node_modules/
           }
       ]
   },

   プラグイン: [
       新しい CleanWebpackPlugin()、
       新しいHtmlWebpackプラグイン({
           タイトル:「TSテスト」
       })、
   ]
}

TSコンパイルオプションを設定する

ルートディレクトリにtsconfig.jsonを作成し、必要に応じて設定します。

{
   "コンパイラオプション": {
       "ターゲット": "ES2015",
       "モジュール": "ES2015",
       "厳密": 真
   }
}

package.json 構成を変更する

package.jsonを変更し、次の設定を追加します。

{
   ...
   「スクリプト」: {
       "test": "echo \"エラー: テストが指定されていません\" && exit 1",
       「ビルド」:「webpack」、
       "開始": "webpack サーブ --open chrome.exe"
   },
   ...
}

プロジェクトの使用

src の下に ts ファイルを作成し、コマンド ラインでnpm run build実行してコードをコンパイルします。

または、 npm startを実行して開発サーバーを起動します。

バベル

開発中にコードを変換するには、webpack に加えて babel が必要になることがよくあります。

より多くのブラウザと互換性を持たせるために、上記の手順に基づいて、以下の手順でプロジェクトに babel を導入します。

TS はコンパイル中のコード変換もサポートしていますが、サポートされるのは単純なコード変換のみです。

Promise などの ES6 機能の場合、TS を直接変換することはできないため、変換には babel が必要です。

依存パッケージをインストールします。

npm i -D @babel/core @babel/preset-env babel-loader core-js

合計 4 つのパッケージがインストールされました。

  • @babel/core: Babel のコアツール
  • @babel/preset-env: Babel の定義済み環境
  • @babel-loader: webpack の babel ローダー
  • core-js: core-jsは、古いブラウザが新しいES構文をサポートできるようにするために使用されます。

webpack.config.js 構成ファイルを変更する

モジュール: {
    ルール:
        {
            テスト: /\.ts$/,
            使用: [
                {
                    ローダー: "babel-loader",
                    オプション:{
                        プリセット: [
                            [
                                "@babel/プリセット環境",
                                {
                                    「ターゲット」:{
                                        "クローム": "58",
                                        "つまり": "11"
                                    },
                                    "corejs":"3",
                                    "useBuiltIns": "使用方法"
                                }
                            ]
                        ]
                    }
                },
                {
                    ローダー: "ts-loader",
                }
            ]、
            除外: /node_modules/
        }
    ]
}

このようにして、ts でコンパイルされたファイルは babel によって再度処理されます。

ほとんどのブラウザでコードを直接使用できるようにします。

ターゲットの構成オプションで互換性のあるブラウザのバージョンを指定することもできます。

これで、webpack を使用して TypeScript コードをパッケージ化およびコンパイルする方法についての説明は終わりです。webpack による TypeScript のパッケージ化とコンパイルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Webアプリケーション開発におけるTypeScriptの使用の詳細な説明
  • ホットアップデートを実装するためのWebsocket4.0+Typescriptメソッド
  • React+TypeScript+webpack4 マルチエントリ構成の詳細説明
  • TypeScript でシンプルな Web アプリケーションを作成する

<<:  Zabbixのインストールと展開の詳細な説明

>>:  MySQL: データの整合性

推薦する

Windows Server 2008R2、2012、2016、2019 の違い

目次共通バージョンの紹介共通バージョンのダウンロードアドレスとインストール以下に簡単な違いを示します...

Reactはtodolistの追加、削除、変更、クエリを実装します

目次ToDoリストを例に挙げましょうディレクトリは次のとおりですアプリ入力.jsリスト.jsアイテム...

Apache Spark 2.0ジョブは完了するまでに長い時間がかかります

現象Apache Spark 2.x を使用すると、Spark ジョブがすべて完了しているにもかかわ...

Mysql ALTER TABLE はフィールドを追加するときにテーブルをロックしますか?

目次MySQL 5.6以前MySQL 5.6以降要約する知らせMySQL 5.6以前更新手順元のテー...

Nest.js パラメータ検証とカスタム戻りデータ形式の詳細な説明

0x0 パラメータ検証Nest.jsでは、パラメータ検証業務のほとんどをパイプライン方式で実装してい...

MySQL における datetime と timestamp の違いと使い方

1. MySQL で現在の時刻を表現するにはどうすればよいでしょうか?実際、表現方法はいろいろありま...

MySql テーブル、データベース、シャーディング、パーティショニングの知識の詳細な説明

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

操作例 MySQL ショートリンク

MySQL ショートリンクの設定方法1. mysql 接続番号ステートメントコマンドを確認します。 ...

Presto をインストールし、Docker で Hive を接続する詳細なプロセス

1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...

React プロジェクトにおける axios カプセル化と API インターフェース管理の詳細な説明

目次序文インストール導入環境の切り替え傍受を要求するレスポンスインターセプションAPIの統合管理要約...

React Nativeのカスタムルーティング管理に関する深い理解

目次1. カスタムルーティング2. タブナビゲーション3. データの返却要約する1. カスタムルーテ...

選択/フォーカス時にすべてのオプションをリストする現在のより良い方法

開発中にこのような要件に遭遇したので、将来使用するために記録しました。需要背景キーボード ショートカ...

mysql5.5.28 のインストール チュートリアルは非常に詳細です。

参考までにmysql5.5.28のインストールチュートリアルです。具体的な内容は次のとおりです。イン...

Windows 10 での MySQL 8.0.12 解凍バージョンのインストール グラフィック チュートリアル

この記事は、MySQL 8.0.12解凍版のインストールグラフィックチュートリアルを記録しています。...