[react]相対経路地獄から脱出(craco)

概要

Reactは既存のVanilla JS(純JavaScript)またはJqueryを使用
不便な開発者のニーズを十分に満たし、成長を続ける.
しかし、人間はすぐに快適さに慣れ、新しい不快感を探し始め、それを修正しようとした.
今日、Reactが開発した先端プロジェクトの規模はますます大きくなり、それを導入する必要があります.
次にcracoについて説明します.無限に繰り返し検索できます.

相対経路地獄

ページコンポーネントimport

一般的なアプリケーション.jsまたはApp.tsでは、urlごとに移動するページコンポーネントを定義します.
スタイルに基づいてlayoutに分割するか、いくつかに分割して管理できます.
各urlに適したページコンポーネントをインポートする必要があるのは避けられない.
../../pages/user/Login
../../pages/user/Logout
../../pages/user/Setting
../../pages/main/Main
同じ...を繰り返す/あとどのくらいかかりますか.

行動、減少者、ショップ?

redoxを使用する場合、action、reducer、storeを使用する場所でインポートする必要があるのも避けられません.
さすが...エデンの地狱の中で、うろうろしている私达は自分を见ることができます.

パス管理は絶対にできないのでしょうか?

私たちはどうしてこのような地獄の中で歩けないことができますか?ページはページ、ReduxモジュールはReduxモジュール、
また、サーバのapiセットを呼び出すサービスはサービスとして、データ型のために作成されたモデルモジュールはモデルモジュールとして使用されます.
絶対パスに指定して使えないのでしょうか?
なければ、この文章も始まらないけど...

Cracoを使用した絶対パスの設定

今から太ってきた
cracoモジュールを使用する簡単な方法を紹介します.
Create Resact App Configuration Overrideの略.どうでもいい
重要なのはどのように私たちを人間の地獄から抜け出すかです.
その他の詳しい使い方はgithubを参照してください.

01.インストール

npm、糸、typescriptなど、自分のプロジェクト状況に応じてインストールします.
npm i --save craco-alias @craco/craco
yarn add craco-alias @craco/craco

02. package.jsonの変更

既存のファイル

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"stop": "taskkill -F -IM node.exe"
},

変更後

"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
},
上記のように変更してcracoプロジェクトを実行します.

03.ワニの配置を追加

プロジェクトルートパスでcookerを使用します.config.新しいjsファイルを作成します.
そして、以下のように書きます.

 const CracoAlias = require("craco-alias");

module.exports = {
  plugins: [
    {
        plugin:CracoAlias,
        options:{
            source : "tsconfig",
            tsConfigPath : "tsconfig.paths.json",
        }
    }
  ]
};

cracoを使用するプロファイルとして使用できます.

04. tsconfig.jsonの変更

tsconfigに次の内容を追加します.

{
  // 추가 부분 시작
  "extends": "./tsconfig.paths.json",
  // 추가 부분 끝
  "compilerOptions": {
    ·······(생략)
  },
  "include": [
    "src"
  ]
}
 

tsconfig.jsonはすべてのファイルを管理できますが、可読性とメンテナンス性のために、ファイルを個別に作成して管理します.

05.別名の追加

今着きました.
上に「./tsconfig.paths.json」がないファイルを拡張し、作成する必要があります.
プロジェクトルートパスにtsconfigを設定します.paths.jsonを生成し、パス設定をプロジェクトに適合させます.

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": { // 아래 부분들을 자유롭게 추가 수정하여 자신만의 절대경로 생성 가능
            "@images/*":["src/images/*"],
            "@action/*":["src/_actions/*"],
            "@reducer/*":["src/_reducers/*"],
            "@store/*":["src/_store/*"],
            "@model/*":["src/model/*"],
            "@page/*":["src/page/*"]
        }
    }
}

06.使用方法

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

//App.js의 router에서 페이지 컴포넌트 import시 쩜의 지옥에서 벋어난 것을 확인가능
import ProjectList from '@page/main/ProjectList';   


const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#212121',
    },
    secondary: {
      main: '#f44336',
    },
  },
});

function App() {
  return (
    <>
    <ThemeProvider theme={theme}>
    <Router>
    
            <Switch>
          <Route exact path="/">
            <ProjectList/>
          </Route>
        </Switch>
        </Router>
        </ThemeProvider>
    </>
  );
}

export default App;

これまでcracoの相対パスを使って...地獄から出る方法を知った.
多くの場合、複雑なwebpackを変更することなくcreate-act-appを使用してプロジェクトを作成および開発できます.
適用される良い方法とされています.

終了時..。

今週は主にアルゴリズムを勉強しました.
航海で提供されるアルゴリズムの問題を逐次漸進的に学習し,必要な知識を学習する.
pythonで簡単にアクセスできますが、後でjavascriptを使用して開発するので、わざとjavascriptを選択してアルゴリズムを解読します.△実は、就職の時、Pythonのほうがいいと思います.
もし問題があれば、Pythonで勉強して解答することもできます.
週末は実戦と前にやったプロジェクトに満足できません.
もう一つのプロジェクトを計画し、バックグラウンドの人と一緒に行うことにした.初期設定をしているのですが、上手な人のコードを見ながら、リハーサルした部分を適用していますが、なかなか…私は一つ一つ勉強して応用しなければなりません.