初期設定[react]react+Type Script+webpack+babelプロジェクト

21165 ワード
React webpack babel typescript テキストリンク

なぜCRAを使うのですか?

CRAはCreate Resact Appの略です.
反応し始めたばかりの人は使いやすい!最適な開発環境を創造するからです.
CRAはWebpackとBabyを個別にインストールして設定する必要はありません.そのため、便利ですが、プロジェクト規模が拡大するにつれてCRAで構築されると速度が遅く重くなります.
そこでWebpackとBabyを活用して手軽なReactプロジェクトを展開するために挑戦してみました!
CRAの反応設定はありません!始めましょう.

Webpack,,なに,,?



Webpackはモジュールオプティカル(光学式)ドライブです.Webpackは、JavaScript、CSS、画像などの依存関係を持つリソースを1つ(または複数)のファイルにバインドすることができる.
Bundler:複数のファイルを整理するためのツール
ES 2015モジュールはすべてのブラウザでサポートされていないため、モジュール単位でパッケージを管理することはできません.
この場合、共有グローバルスキャンのため、変数名の競合やロード順序が脆弱になる可能性があります.
Webpackを使用すると、モジュールをサポートできないブラウザでの依存性管理の問題を解決できます.
また,webpack設定により,多様な機能を提供できる.
私がWebpackを使う理由は3つあります.
  • ファイルレベルのJavaScriptモジュール管理
  • ブラウザあたりのHTTPリクエスト数制限
  • Dynamic Loading & Lazy Loading

    • 1.JavaScriptモジュールをファイル単位で管理する


    複数のJavaScriptファイルで宣言された識別子の有効範囲は、デフォルトでグローバル範囲です.
    そのため、その範囲が広く、どこからでもアクセスでき、とても便利です.
    でも.
    <!-- index.html -->
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
    <script src="./app.js"></script>
    <script src="./main.js"></script>
  </body>
</html>
    // app.js
var num = 10;
function getNum() {
  console.log(num);
}
    // main.js
var num = 20;
function getNum() {
  console.log(num);
}
    上記の場合、結果は20となります.
    欠点は、このような複雑なアプリケーションを開発すると、変数の競合やロード順序などの問題が発生しやすいことです.
    Webpackは、これらの問題を解決するためにモジュール単位で管理するのに役立ちます.

    2.ブラウザ固有のHTTPリクエスト数の制限


    ブラウザで一度にサーバに送信できるHTTPリクエストの数には制限があります.
    通常、一度に6つのリクエストを発行することができ、Webpackによってバインドされるファイルの数も減少するため、パフォーマンスをより迅速に向上させることができます.
    また、リクエスト回数を減らすことで、Webサイトのロード速度を向上させ、ユーザーに良い体験を提供できます.

    3. Dynamic Loading & Lazy Loading


    SPAの欠点は、初期に不要なページにスクリプトをロードすることです.
    しかし,Webパッケージバンドルモジュールにより,今後必要とされるリソースを後で動的に要求することができる.

    Webpackプリファレンスパラメータ

    webpack.config.jsで設定します.

    1. Entry point


    Entry pointは、内部依存関係図の作成を開始するためにバインド処理を開始するポイント(エントリポイント)である.
    Webpackは、エントリポイントに依存する他のモジュールとライブラリを決定します.
    HTMLページごとに1つのエントリポイント
  • SPA:1エントリポイント
    • module.exports = {
  entry: "./src/index.tsx",
}
  • MPA:複数の入口点
    • module.exports = {
  //...
  entry: {
    home: './home.tsx',
    about: './about.tsx',
    contact: './contact.tsx',
  },
};

    2. Output


    outputオプションは、バインド結果を格納する경로(path)および파일명(filename)である.
    entry pointは複数あります.
    outputは1つしか指定できません.
    module.exports = {
  output: {
    path: path.join(__dirname, "/dist"),
    filename: 'bundle.js', // entry point가 1개인 경우
    // filename: '[name]_bundle.js', // entry point가 여러개인 경우 
  }
};
    publicフォルダのname bundle.jsファイルを生成します.

    3. Loader


    入力したassetsはloaderにより加工して必要な出力を生成する.(=加工工場)
    webpackは基本的にjs、jsonしか理解していません.
    loaderを使用してファイルを前処理できます.
    これにより、JavaScript以外のすべての静的リソース(画像またはcssファイル)をバンドルできます.
    バインド中にloaderがJavaScriptに変換するためです.
    cf.rulesの後ろのloaderが最初に実行されます.
    代表的ないくつかのローダを紹介します.
  • css-loader:cssファイルを読み取り、webpackにインポートするロール
  • style-loader:インポートしたCSSコードをDOMの
    • にスタイルで挿入します.
  • file-loader:フォントや画像などの
    • タイプのファイルを説明します.
    module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader", "ts-loader"],
      },
      {
        test: /\.(jpg|png|gif|svg)$/,
        use: ["file-loader"],
      },
      {
        test: /\.css$/, // loader를 적용할 파일(정규식으로 작성)
        use: ['style-loader', 'css-loader'], // 사용할 loader
      },
    ],
  },

};
    ちなみにCSS-In-JS方式を使いますのでcss-loaderやstyle-loaderは不要です.

    4. Plugin


    Pluginは、Webパッケージの基本動作に追加の機能を提供することができる.
    これはLoaderができないことを実行します.
    バンドルされたファイルを乱読、圧縮したり、ファイルコピー、ファイル抽出、別名使用などの操作を実行したりできます.Loader:モジュールを処理するために、入力を出力にするプロセスに関与する.Plugin:最終出力(バインドされたファイル)を変換します.
    まず代表的なプラグインをご紹介します.
    HtmlWebpackPlugin
    ビーム注入に関心を持つことなく、ビームファイルを含むHTMLファイルを自動的に生成します.
    生成されたビームを使用するには、scriptタグを追加する必要があります.頻繁に変更すると、変更するたびに面倒になります.この問題は、対応するプラグインによって解決されます.
    const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  	//...
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html', // 기준이 되는 html
            filename: 'indexResult.html', // 결과적으로 생성되는 파일 이름
            chunks:['entry'], // entry point -> index.js가 번들링된 결과가 HTML에 추가 
        }),
    ]
};
    その他の一般的なplugin
  • dotenv-webpack : .
    • プラグインenvの変数をインポートする
  • clean-webpack-plugin:プラグイン
    • は、正常に構築された後に既存の構築フォルダを削除するために使用されます.
  • mini-css-extract-plugin:個別のcssファイルを作成および構築するためのプラグイン

    • 5. webpack-dev-server


    Webパッケージの開発サーバツールを使用します.実際の導入サーバと同様の環境を提供する自動リフレッシュ.
    使用する結果をリフレッシュするたびにチェックする必要があります.この方法は、実際の導入サーバ環境とは異なり、リフレッシュするたびに開発効率が低下する可能性があります.
  • 静的:静的ファイルのフォルダパスを指定します.(デフォルト:public)
  • ポート:ポート番号(デフォルトは8080)
  • https:httpsプロトコル使用(デフォルトはhttp)
  • host:クッキーを使用するか、検証が必要な場合は、同じドメインに設定します.
  • ホットスポット:ホットモジュール交換可能(HMR)
    • HMR(Hot Module Replacement)
    ページ変更を処理する場合は、ページ全体を再ロードする機能ではなく、変更のみを更新します.ネットワーク上で既にデータを取得している場合や、計算された状態を再計算しても効率が悪い場合は、HMRを使用して開発速度を節約できます.
    module.exports = {
  //...
  devServer: {
    port: 3000,
    open: true,// 서버가 시작된 후 브라우저를 열도록 dev-server에 지시한다. 
    hot: true,
  },
};

    6. devtools


    バインドされたファイルと元のファイルをマッピングして、デバッグを円滑にします.
    module.exports = {
  //...
  devtool: "eval-source-map", //  원본 소스를 그대로 나타내준다.
};

    7. Mode


    内蔵のwebpack最適化は、環境ごとに使用できます.
    module.exports = {
  mode: 'development', // or "production" or "none"
};
  • 開発:開発者モデル
  • 製品:製品配置モード(default)
  • none:設定なし

    • babelは誰ですか?


    babelはJavaScriptコンパイラです.
    ECMAScript 2015+コードを初期バージョンのJavaScriptに変換するためのツールです.実行時ではなく構築時にバンドルパッケージと同じツールを使用して実行します.
    1.変換構文
    2.対象環境で不足している폴리필機能
    3.変換元コード

    ポリフィル


    PromiseやMapのように、ファイルを変換するだけでは解決できない詳細を実現しています.
    実行時に古いブラウザに注入し、リストが実装されているように使用します.
    babelを使用すると簡単に追加できます.

    babel設定はwebpackなどのバンドルパッケージでファイルを変換します。


    Webpackでbabel設定をしましょう!

    babel優先パラメータ

    npm i core-js
npm i -D babel-loader
    core-jsのマルチファンクションペンを使用するには、usebiltinsとcorejsオプションを追加する必要があります.useBuilIns:使用状況(自動注入に必要な重合ペン)|entry(直接注入)corejs:使用するcore-jsパッケージのバージョン
    babel.config.js
    module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: 3,
      },
    ],
    "@babel/preset-react",
    "@babel/preset-typescript",
  ],
  plugins: ["@babel/plugin-proposal-class-properties"],
};
    webpack.config.js
    module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader", "ts-loader"],
      },
      //...
    ],
  },
};
    待って、なぜinterpreter言語にコンパイラが必要なのですか?
    バーベルはJavaScriptで結果を生成するコンパイラです.
    フロントエンドの発展が速すぎるので、これらの新しいESNext構文を既存のブラウザに使用するには、Babelが必要です.
    追加する内容.
    1.CRAを使用してwebpack、babelを設定する方法.複雑な理由.
    2.cracoを使用するとCRAパッケージの設定が上書きされますか?
    3.CRAを使わずにbabelだけ使えばcracoを使わなくてもいいですか?
    4.cracoの非配線機能
    5.プロファイルをパターン別に管理する際のメリットとデメリット
    6.react 18から変更した内容を整理する.
    https://velog.io/@eastshine94/webpack-webpack-%EC%84%A4%EC%B9%98%EB%B6%80%ED%84%B0-%EC%8B%A4%ED%96%89%EA%B9%8C%EC%A7%80
    https://chanyeong.com/blog/post/7
    https://byul91oh.tistory.com/387
    MPPデータベース性能テスト
    Web開発レシピ-3(写真中心のWebサイト作成)