WebpackはTypeScriptコードをパッケージ化するためのスキャフォールディングを構築します

WebpackはTypeScriptコードをパッケージ化するためのスキャフォールディングを構築します

フォルダを作成する

ディレクトリ構造: dabaots

npm init -yを初期化して package.json ファイルを生成します。

ディレクトリ構造:
ダバオツ
dabaots/package.json

次に開発環境に以下のツールをインストールします

npm i -D

webpack·························(コードをパッケージ化するためのコアツール
webpack-cli······················(webpack 用コマンドラインツール)
typescript ·························(ts を書くために必要なコアパッケージ)
ts-loader ···························(webpack と ts は ts-loader を介して統合できます)
html-webpack-plugin … (HTML を自動生成する webpack プラグイン)
webpack-dev-server … (更新ページを更新する必要はありません)
clean-webpack-plugin … (各パッケージが起動される前に、dist 内の最新のファイルを自動的にクリアして再生成する方法)
"@babel/core" "@babel/preset-env" babel-loader core-js (babel変換をインストールすると、環境に応じてコードに変換されます)

発生する可能性のある小さな問題: ここで発生する可能性のある問題は、ダウンロードした依存パッケージ webpack-dev-server のバージョンが Google のバージョンと互換性がない場合は、プラグインのバージョンを低いレベルに変更するか、Google Chrome を最新バージョンにアップグレードすることをお勧めします。そうしないと、「Cannot GET /chrome.exe」というエラーが発生します。

次に、設定用のwebpack.config.jsを作成します。

ディレクトリ構造:
ダバオツ
dabaots/package.json
dabaots/webpack.config.js

// パッケージをインポートする const path = require("path")

//HTML を自動生成するためのパッケージを導入します const HtmlWebpackPlugin = require("html-webpack-plugin")

//dist ファイルを更新するためのプラグインを導入します const {CleanWebpackPlugin} = require("clean-webpack-plugin")

// webpack のすべての設定情報は、moudle.exportsmodule.exports={ に書き込む必要があります。
    //エントリファイルエントリを指定します: "./src/index.ts",
    //パッケージ化されたファイルが配置されているディレクトリを指定します。出力:{
        //パッケージ化されたファイルのディレクトリパスを指定します:path.resolve(__dirname,"dist"),
        //パッケージ化されたファイルのファイル名を指定します: "bundle.js",
        //コンパイル時に矢印関数を使用しない環境: {
            矢印関数: false
        }
    },
    
    //Webpack はパッケージ化時にモジュールを使用する必要があります。module:{
        //ロードするルールを指定します:[{
            // test はルールが適用されるファイル test:/\.ts$/ を指定します。
            // use は使用するローダーです
            //Babelを設定する
            使用:[
                //ローダーを指定する loader: "babel-loader",
                    オプション:{
                        //定義済みの環境プリセットを設定します:[
                            [
                                //環境プラグイン「@babel/preset-env」を指定します。
                                //設定情報{
                                    //互換性のあるブラウザターゲット:{
                                        "クローム":"88"
                                    },
                                    //corejsのバージョンを指定します "corejs":"3",
                                    // オンデマンドでロードすることを意味します "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ]、
            //パッケージ化およびアップロードされないファイルを設定します exclude: ["/node_modules/"]
        }]
    },
    
    // webpackプラグインを設定する:[
        新しいHtmlWebpackプラグイン({
            // カスタム HTML テンプレート アドレス テンプレート: "./src/index.html"
        })、
        // パッケージ化と起動の前に、dist 内のファイルは自動的にクリアされます。最新のファイルを再生成する方法 new CleanWebpackPlugin()
    ]、
    
    解決する:{
        //tsファイル拡張子:['.ts','.js']に他のtsパッケージを個別に導入する場合のエラーの問題を解決します
    }
}

最後に、package.jsonにパッケージ化と実行スクリプトを記述します。

ターミナルでnpm run build packageを実行し、

パッケージ化が成功すると、distファイルが自動的に生成されます。

npm run start自動的にGoogle Chromeを開き、コンテンツは最新の状態に更新されます。

これで、webpack スキャフォールディングと TypeScript コード パッケージングに関するこの記事は終了です。より関連性の高い webpack TypeScript コード パッケージング コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript 列挙の基本と例
  • TypeScript の条件型に関する詳細な読書と実践記録
  • Typescript+React でモバイルと PC でシンプルなドラッグ アンド ドロップ効果を実現
  • ReactプロジェクトでのTypeScriptの実装
  • Vue3とTypeScriptを組み合わせたプロジェクト開発の実践記録
  • Vue3 + TypeScript 開発の概要
  • Vue3+TypeScriptは再帰メニューコンポーネントの完全な例を実装します
  • VueでTypeScriptを使用する方法
  • TypeScriptのインデックスシグネチャの理解に関する簡単な説明

<<:  例によるMySql CURRENT_TIMESTAMP関数の分析

>>:  MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要

推薦する

MySQL の複合インデックスはどのように機能しますか?

目次背景複合インデックスを理解する左端一致原則フィールド順序の影響複合インデックスは単一のインデック...

クラウドデータ移行サービスの観点から見たMySQLの大規模テーブル抽出モードの原理分析

概要: MySQL JDBC 抽出にはどのような方法を使用すればよいでしょうか? その方法を説明しま...

MySQL のロックの仕組みと使用法の分析

この記事では、例を使用して MySQL のロック メカニズムと使用方法を説明します。ご参考までに、詳...

HTML チュートリアル: 画像のサイズ、配置、間隔、境界線の属性を変更する方法

画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...

Webフロントエンドの一般的な操作(JS/HTML/CSSなどの知識を含む)

ul liの前のアイコン1をキャンセルしますクリア値1値を1に設定ラベル中央値1をクリアラベルの中央...

MySQLのkillがスレッドをkillできない理由

目次背景問題の説明原因分析シミュレーションする総括する背景日常の使用において、MySQL で個別また...

MySQLの外部結合と内部結合クエリの違い

外部結合の構文は次のとおりです。フィールド名を選択FROM テーブル名 1 LEFT|RIGHT|F...

HTML テーブルの行間隔を変更する方法の例

HTML テーブルを使用する場合、行間隔を変更する必要がある場合がありますが、余白、パディング、折り...

ページ内のリストプルダウン効果を実現するための純粋なCSS

次のような効果がよく見られます。 そうです、ページ上でよく使われる「展開と折りたたみ」のインタラクシ...

Ubuntu 18.04 Server バージョンのインストールと使用方法 (画像とテキスト)

1 システムのインストール手順OSバージョン:1804イメージのダウンロード: http://cd...

html+css3で実装されたログインインターフェース

成果を達成するまずHTMLを使って基本的なフレームワークを構築します <本文> <...

Linux 構成 SSH パスワードフリーログイン「ssh-keygen」の基本的な使い方

目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...

Windows Server 2008 R2 リモート デスクトップのポート 3389 を変更する方法

Windows サーバー リモート デスクトップのデフォルトのポート番号は 3389 です。職場でサ...

重複したMySQLテーブルをマージして削除する簡単な方法

シナリオ:クロールされたデータは、別のメインテーブルと同じ構造を持つデータテーブルを生成するため、マ...

TypeScriptの列挙型を詳しく説明する

目次1. デジタル列挙2. 文字列の列挙3. 逆マッピング4. 異種列挙5. 定数列挙6. 列挙メン...