Vite + React で path alias を使いたい！ - かもメモ
前回までのあらすじ npm create vite コマンドでサクッと Vite + React (TypeScript) のプロジェクトが作れました！ SPA はファイルがたくさんになるので import の際に ../../../ HELL になりがちです。これを回避するためにパスエイリアス(path alias)を設定しておきたいお気持ちに溢れます。 結論: vite-tsconfig-paths を使えば楽ちん vite-tsconfig-pathsを使えば tsconfig.json にパスエイリアス設定を作成するだけで済む。 $ npm i -D vite-tsconfig-paths vite.config.ts import { defineConfig } from 'vite' + import tsconfigPaths from 'vite-tsconfig-pat
TypeScirptのプロジェクトにエイリアスを設定して絶対パスでimportするメモ
TypeScriptのプロジェクトを作る度に設定すると思うのでメモ。 前提 Link to heading Webpackでプロジェクトを管理している Linterはeslintを使用している tsconfig.jsonの設定 Link to heading tsconfig.jsonのcompilerOptionsを設定してsrc以下のディレクトリに対してエイリアスを貼る。 エイリアスになる文字は何でも良いが、私はnpm経由でimportするmoduleと混同しないように @/ を使用している。 { "compilerOptions": { ~~~ "baseUrl": "./", "paths": { "@/*": ["src/*"] }, ~~~ } } import { Configuration } from 'webpack'; const config: Configurat
Next.js+TypeScriptでimportのaliasを設定するのが楽になっていた - RX100で撮り歩くブログ
importするときに何もしていないと以下のように相対パスで書きますが、階層が深くなると面倒です。 import { Button } from '../../components/Button それを以下のように書けるようにします。 import { Button } from '@/components/Button Next.jsでは以前はパッケージを追加して、next.config.jsをつくって設定を書く必要がありました。しかし、v9.4からtsconfig.jsonに書き足すだけでOKになったようです。 nextjs.org 上記のサイトに書いてあるようにtsconfig.jsonのcompilerOptionsに追加するだけです。@から始めたい場合は以下のように書きます。 { "compilerOptions": { "baseUrl": ".", "paths": { "@
Changing Mapping with Zero Downtime
Search and analytics, data ingestion, and visualization – all at your fingertips.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
