Veiteを使った絵文字の使用

Vite 誰もが話している次のクールなものです.非開始のために、それは猛烈に速いリフレッシュ(HMR)速度でdevサーバを提供するツールで、非常に最適化されたビルドを生成するために、ロールラーモジュールバンドルを積んで来ます.

Vite 2.0発表

エバン・ユー・ 2月16日・ 4分読む

#javascript #webdev #vite

あなたのほとんどは、すでに精通しているでしょうEmotionJs - 非常に人気のCSSはJSライブラリです.それは、Aを提供する反応味で来ますcss 非常にあなたの反応成分のスタイルを書くことの全体的な開発者経験を強化する支柱.

公式の例docs
しかし、この非常に便利なCSSのプロップを使用する必要があるたびに、我々は我々の非常に上に感情のカスタムJSX pragmaを追加する必要がありますjsx コンポーネント.

/** @jsx jsx */
import { jsx } from '@emotion/react'

あなたがVITEショットを与えることを計画している場合-良いニュースは、任意の追加のティンカーリングを行う必要はありません.感情は、上記のアプローチを使用するとき、どんな中断なしででも働きます.しかし、はるかに良い方法は、我々は単にすべてのJSXファイルのインポートのこの塊をインポートすることを避けることができます.
それをするには-を更新する必要がありますesbuild プロジェクトのオプションvite.config ファイル.

import { defineConfig } from 'vite';


// https://vitejs.dev/config/

export default defineConfig({
   plugins: [...],
   esbuild: {
     jsxFactory: `jsx`,
     jsxInject: `import { jsx } from '@emotion/react'`,
   }
   ...
});

Viteの使用esbuild 編集のためにフードの下で.

jsxInject 単にESBuildの設定--inject 変換オプションと自動インポートすべてのモジュールをインポート.jsx ファイル.

jsxFactory デフォルト値を上書きするReact.creatElement 感情を込めてs ファクトリー関数.

そして、それです.これで、デフォルトですべてのJSXコンポーネントで感情を使用することができます.
インポートしたい場合はcss 機能と共にjsx コンポーネント内でインポートするのを避けるために、シリアル化されたスタイルオブジェクトを構築します.

jsxInject: `import {jsx, css} from '@emotion/react'`