[react]バーベルとWebパッケージで設定

19172 ワード
講義 React TIL テキストリンク
ネットゲーム制作を学ぶReact 2
授業内容の位置づけを整理する.
📌 ネットワークパッケージ

  • なぜWebパッケージを使うのですか?
  • 2万個のコンポーネントjavascriptファイルを統合し、バーベルに適用(
    • )
  • スクリプトの重複を解消できます.

  • Webパッケージを使用するには、Nodeを使用する必要があります.
    端末は하이픈(-D)開発でのみ使用される.
    • Webパッケージのインストール

  • リアクターを取り付ける
    npm i react react-dom

  • Webパッケージのインストール
    npm i -D webpack webpack-cli
    端末は하이픈(-D)開発でのみ使用される.実際のサービスではWebパッケージは使用されません.
    • Webパッケージの設定
    // webpack.config.js
const path = require('path');

module.exports = {
	name: 'wordrelay-setting',
	mode: 'development', // 실서비스: production
	devtool: 'eval', // 개발인 경우 eval, 프로던션인 경우 hidden-source-map
	resolve: {
		extensions, ['.js', '.jsx'], // js, jsx 파일이 있는지 알아서 찾아주는 옵션
	},

	entry: {
		app: ['./cleint'],
	}, // 입력

	module: {
		rules: [{
			test: /\.jsx?/,
			loader: 'babel-loader',
			options: { 
				presets: ['@babel/preset-env', '@babel/preset-react'],
				plugins: ['@babel/plugin-proposal-class-properties'],
			} // 바벨의 옵션 적용
		}],
	},
	ouput: {
		path: path.join(__dirname, 'dist'), // path.join()을 하면 앞의 절대경로를 맞춰준다. 현재 폴더에 
		filename: 'app.js' // 우리가 원하는 아웃풋 할 파일
	}, // 출력
};
    Webパッケージには、他のファイルが読み込まれたファイルを別途書く必要はありません.WebPackは自分で追跡して一緒にロードします.
    拡張子は記入しなくてもいいです.
    entryにモジュールを適用し、出力として減算します.
    rulesはルールをリストするので、配列別に作成されます.
    📌 Webパッケージとして構築
    // package.json

script:{
	dev: webpack
} // 스크립트를 사용해서 npm run dev식으로 실행 할 수 있다. 또는 npx webpack 식으로도 가능하다.
  • jsxはjavascript構文ではありません.
    • したがって、
  • は、Webパケットを介して構築するためにjsxを処理しなければならない.jsxを処理するためにはbabelを設定しなければならない.
    • バーベルをセットする
    npm i @babel/core
    バーベルのしん
    npm i @babel/preset-env
    最新の構文をブラウザと組み合わせて使用します.
    npm i @babel/preset-react
    JSXをサポートします.
    npm i babel-loader
    バーベルとネットバッグをつなぐ.
    npm i -D @babel/plugin-proposal-class-properties
    @Babel/prefert-envとpluginspresetはプラグインの集合です.
    module: {
		rules: [{
			test: /\.jsx?/,
			loader: 'babel-loader',
			options: { 
				presets: [
					['@babel/preset-env', {
							targets: {
								browsers: ['last 2 chrome versions'], // 크롬 버전 호환
							},
					}],
					'@babel/preset-react'
					],
				plugins: ['@babel/plugin-proposal-class-properties'],
			} // 바벨의 옵션 적용
		}],
	},
    https://github.com/browserslist/browserslist
    ブラウザ・リスト・オプションを使用すると、ブラウザ間のインターネットの問題を解決できます.
    実際の作業では、Webパッケージに遭遇した場合、プラグインとrulesを除いて、デバッグによって追跡されます.
    react jsxのformラベルにはvalueとonChangeがあります.
    📌 Web Pack Deviceサーバとホットロード
    npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D
  • 開発サーバ
    • npm i -D webpack-dev-server

  • 包json
    {
  "name": "word-relay",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve --env development"
  },
  "author": "jangwonyoon",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-loader": "^8.1.0",
    "react-refresh": "^0.10.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}
    "dev": "webpack serve --env development"

  • ホットロードWebパッケージ設定
    // webpack.config.js

const path = require('path');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  name: 'word-relay-dev',
  mode: 'development',
  devtool: 'inline-source-map',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  entry: {
    app: './client',
  },
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      options: {
        presets: [
          ['@babel/preset-env', {
            targets: {browsers: ['last 2 chrome versions']},
            debug: true,
          }],
          '@babel/preset-react',
        ],
        plugins: ['react-refresh/babel'],
      },
      exclude: path.join(__dirname, 'node_modules'),
    }],
  },
  plugins: [
    new ReactRefreshWebpackPlugin(),
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js',
    publicPath: '/dist',
  },
  devServer: {
    publicPath: '/dist',
    hot: true
  }
};
  • 리로딩과 핫리로딩의の違い:名前の通りに再ロードすることはリフレッシュです.更新すると、既存のデータが削除されます.ホット・リロードは、既存のデータを保持しながら画面を変更できます.
    • ドッカーへの初心者ガイド(第3部)－コミュニケーションとネットワーク
    動的グラフとグラフを構築するには、反応のプロットを使用する