TIL 20210221

今日、今日

Programmers algo

玩具計画(todo List)準備

今、今
今回のTOYプロジェクトのために、まずtypescriptベース設定を用意しました.
プロジェクトの準備
node intialization

npm init -y

package.jsonファイルが作成され、このプロジェクトでnodejsベースのプロジェクトに設定されます.
react

npm i --save react react-dom

react、react-domのインストール
タイプ定義ファイル

$ npm install --save @types/react @types/react-dom

Typeスクリプトのインストール

npm -i --save-dev typescript

ターミナルサービス初期化

npx typescript --init

--initオプションを使用して初期化を行うと、tsconfig.jsonファイルが自動的に生成されます.reaction jsxコードを使用するには、compilorOptionsのjsxプロパティに"react"値を追加する必要があります.(デフォルトはコメント)

"compilorOptions": {
  "jsx": "react" // "preserve" => "react"

Webパッケージ構築の優先パラメータ
まず、タイプスクリプトローダts-loaderとWebパッケージをインストールします.

$ npm install --save-dev ts-loader webpack webpack-cli

webpack.config.jsファイルを作成し、以下の内容でパッケージ設定を構成します.(root Dir)

module.exports = {
  mode: "development",

  // 엔트리 포인트
  entry: "./src/index.tsx",

  // 빌드 결과물을 dist/main.js에 위치
  output: {
    filename: "main.js",
    path: __dirname + "/dist",
  },

  // 디버깅을 위해 빌드 결과물에 소스맵 추가
  devtool: "source-map",

  resolve: {
    // 파일 확장자 처리
    extensions: [".ts", ".tsx", ".js"],
  },

  module: {
    rules: [
      // .ts나 .tsx 확장자를 ts-loader가 트랜스파일
      { test: /\.tsx?$/, loader: "ts-loader" },
    ],
  },
}

入口点をsrc/index.tsxに設定します.
構築結果(output)は、distフォルダにmain.jsを生成します.
デバッグ結果にソースマッピングを追加します(devtool).一部のプロパティではデバッグできません
モジュールは処理タイプのスクリプトファイルであり、resolve.extensionsプロパティに.ts, .tsx拡張子を追加します.es6コードは、ts-loaderによって処理されるタイプのスクリプトコードに設定される..tsまたは.tsxに設定されたファイルは、ts-loaderによって解釈される.
これにより、Webパッケージの設定が完了し、package.jsonに構築スクリプトが登録されます.

{
  "scripts": {
    "build": "webpack"
  }
}

次のコマンドで構築すると

$ npm run build // yarn build

distフォルダには、main.jsおよびmain.js.mapファイルが生成されます.
明日、明日

プロジェクトホームページ構成(TooList)

政府の援助を受けた教育

明日の授業

アルゴリズム