レスポンスアイテムの作成[Next,Type-script,Eslint,Jest,Emotion,Tailwindcss,twin.macro]

24520 ワード

プロジェクトの設定
以前自分でウェブレイアウトをしたことがあるので、次のフレームに変えました.実際、どのように動くかという概念だけを理解すれば、手作業で設定する理由はありません.下部からフレームワークを作成しないようにします.
もちろん、自分で一度やってみたほうがいいと思います.この襟に置かれています.
反応する犬のような場所
環境の設定とライブラリの選択は最悪です.通常、Vueは最も有名なVuexのグローバルステータス管理ライブラリのみを使用し、CLIは非常に良いので、設定に時間がかかりません.
しかし、個人政治的な理由でVUEの使用を放棄した(中国+共産党はあまり好きではない).
これらの問題に対して、反応陣営の次の枠組み.jsという解決策があってよかったです.
CRAは私から見れば少しゴミです.私に私の基準に従ってこれを書かせたのかどうか分かりません.
それに比べて、npm audit fixは本物のわさびです.事前にフォルダ構造を決めてくれてルーターが簡単になってよかったしかし、盲目的に使うよりも、原理を正しく理解して使うことで、10分の活用が可能になります.
ビルド
ボイラボードを使用したアプリケーションの作成

npx create-next-app --example with-typescript-eslint-jest my-app

Next.js陣営で作ったボイラーボードの一つを持ってきてください.バニラの住所はこちらです。
バーベルモジュールの左輪ピストルプラグインを取得

npm install -D babel-plugin-module-resolver

相対パスを取得する際に使いやすいライブラリです.
babelrc.jsonの設定

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": [
    "@emotion/babel-plugin",
    "babel-plugin-macros",
    [
      "module-resolver",
      {
        "root": [
          "."
        ],
        "alias": {
          "@pages/*": "./pages/*"
        }
      }
    ]
  ]
}

ここでは、Next.jsを介して相対パスを簡単に設定することができる.
emotion, tailwindcss, tailwind.マクロのインストール

npm install @emotion/react @emotion/styled @emotion/css @emotion/server
npm install -D twin.macro tailwindcss postcss@latest autoprefixer@latest @emotion/babel-plugin babel-plugin-macros

aliasプロジェクトはアーカイブに存在し、主な目的はtwin.macroをtailwindcssと同様に使用することである.
私が考えているcss-in-jsの唯一の欠点はクラス名が長すぎてjsxが見苦しくて、tailwindcssのように、それを利用して見苦しいstyled-componentを分けることができます.
コードはもっとよく見えます.
tailwind.config.jsの作成

npx tailwindcss-cli@latest init -p

_app.tsxの作成

import { FC } from 'react'
import Head from 'next/head'
import { GlobalStyles } from 'twin.macro'
import { AppProps } from 'next/app'
import '@pages/index.css'

const App: FC<AppProps> = ({ Component, pageProps }: AppProps) => (
  <>
    <Head>
      <title>
        Nextjs App with TypeScript, ESlint, Jest, Emotion, Tailwind and Twin
      </title>
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <GlobalStyles />
    <Component {...pageProps} />
  </>
)

export default App

ここでclassNameを@pages/index.cssに変換する理由は、通常のimportの造形に必要であるからである.
index.cssの作成

@tailwind base;
@tailwind components;
@tailwind utilities;

_document.tsxの作成

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from 'next/document'
import { extractCritical } from '@emotion/server'

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx)
    const page = await ctx.renderPage()
    const styles = extractCritical(page.html)
    return {
      ...initialProps,
      ...page,
      styles: (
        <>
          {initialProps.styles}
          <style
            data-emotion-css={styles.ids.join(' ')}
            dangerouslySetInnerHTML={{ __html: styles.css }}
          />
        </>
      ),
    }
  }

  render() {
    return (
      <Html lang="ko-kr">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

デュアルプリセット設定classNameファイルに設定すればいいです.

  "lint-staged": {
    "*.@(ts|tsx)": [
      "yarn lint",
      "yarn format"
    ]
  },
  "babelMacros": {
    "twin": {
      "preset": "emotion"
    }
  },
  "dependencies": {
    ...

twin.マクロの設定

import 'twin.macro'
import styledImport from '@emotion/styled'
import { css as cssImport } from '@emotion/react'

declare module 'twin.macro' {
  // The styled and css imports
  const styled: typeof styledImport
  const css: typeof cssImport
}
declare module 'react' {
  // The css prop
  interface HTMLAttributes<T> extends DOMAttributes<T> {
    css?: CSSProp
  }
  // The inline svg css prop
  interface SVGProps<T> extends SVGProps<SVGSVGElement> {
    css?: CSSProp
  }
}
// The 'as' prop on styled components
declare global {
  namespace JSX {
    interface IntrinsicAttributes<T> extends DOMAttributes<T> {
      as?: string
    }
  }
}

タイプスクリプトを使用する場合は、上記のようにタイプを直接生成する必要があります.
tsconfig.json設定

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@pages/*": ["./pages/*"]
    }
  },
  "files": ["twin.d.ts"],
  "exclude": ["node_modules", ".next", "out"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"]
}

上記の2つの相対パス情報(package.json)とタイプ情報(compilerOptions.paths)に注意してください.
参考資料
https://velog.io/@you1367/%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95TypescriptNextEmotionTailwindTwin.macroapollo

Reference

この問題について(レスポンスアイテムの作成[Next,Type-script,Eslint,Jest,Emotion,Tailwindcss,twin.macro]), 我々は、より多くの情報をここで見つけました https://velog.io/@jakeseo_me/리액트-프로젝트-생성하기Next-Typescript-Eslint-Jest-Emotion-Tailwindcss-twin.macro

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Mysqlイベントスケジューラ(Event Scheduler)

クリップボードへのコピー