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: データの整合性

推薦する

MySQLでよく使われる文字列関数トップ10の詳細な説明

こんにちは、みんな!技術の話ばかりで髪は切らないトニーです。データベース関数は、何らかの機能を持ち、...

WINDOWS での MYSQL のインストールに関する詳細なチュートリアル

1. インストールパッケージをダウンロードする- お使いのコンピュータシステムに応じて適切なバージョ...

相対幅と絶対幅が競合する場合の HTML+CSS div ソリューション

相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...

Vue の計算プロパティとリスナーの使用の概要

1. 計算プロパティとリスナー1.1 計算プロパティ <!DOCTYPE html> &...

CSSは高度に適応したフルスクリーンを実現します

独自のデモを作成するときに、display:flex を使用して垂直方向の中央揃えを実現したいと思い...

MySQL で 2 つのセットの交差/差/和を取得する方法

MySQL の一般的なシナリオ: 2 つのデータ セットの交差と差を取得するステップ1. 2つのコレ...

mysql 一時テーブルの使用状況の分析 [クエリ結果は一時テーブルに保存できます]

この記事では、例を使用して MySQL 一時テーブルの使用方法を説明します。ご参考までに、詳細は以下...

Web デザインにおける Less と More について語る (写真)

Less is More は多くのデザイナーのキャッチフレーズです。これは建築界の巨匠ルートヴィヒ...

ウェブデザイナー職の面接でよくある質問と回答

1. ASP.NET Web アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...

Docker で hyperf を開発する完全な使用例の詳細な説明

ハイパーフ公式サイトHyperf 公式ドキュメントのインストール1. Dockerの使用docker...

Ubuntu ターミナル マルチウィンドウ 分割画面 ターミネーター

1. インストールターミネーターの最大の特徴は、1つのウィンドウで複数のターミナルを開くことができる...

Navicat Premium15 でクラウド サーバーに接続する際のデータベースの問題と落とし穴

クラウドサーバーを使用するとデータベースに接続できる場合もありますが、Navicat Premium...

クリーンなXHTML構文

XHTML を書くには、明確な HTML 構文が必要です。 XHTMLを書くには、きれいなHTML構...

Vueはel-tableを使用して列と行を動的に結合します

この記事の例では、el-tableを使用して列と行を動的にマージするVueの具体的なコードを参考まで...

jsでユーザー登録機能を実装する

この記事の例では、ユーザー登録機能を実装するためのjsの具体的なコードを参考までに共有しています。具...