Alias @ Typescript w/ Vite.js
Mungkin ini sangat simple, tetapi kadang hal sesimpel ini buat kita pusing. Pertama sekali, saya akan menganggap Anda akan memakai react typescript dengan vite.js.
Share
Mungkin ini sangat simple, tetapi kadang hal sesimpel ini buat kita pusing. Pertama sekali, saya akan menganggap Anda akan memakai react typescript dengan vite.js.
Install react-ts
Buka terminal, kemudian cd ke workspace Anda. Kemudian jalankan perintah berikut:
npm create [email protected] react-app -- --template react-ts
bashCopy
Buka folder nya di text editor Anda, dan jika Anda perhatikan pada direktori root, harusnya akan ada salah 2 dari semua file yang ada dan itu:
├── tsconfig.json └── vite.config.ts
bashCopy
Pertama, buka file tsconfig.json
dan pastinya akan ada banyak di dalam peraturan typescript seperti:
{ "compilerOptions": {...}, "include": [...], "references": [...] }
jsonCopy
compilerOptions
Kita akan fokus pada compilerOptions
untuk menambahkan kode baseUrl
dan paths
seperti:
1{ 2 "compilerOptions": { 3 ... 4 "baseUrl": ".", 5 "paths": { 6 "@/*" : ["src/*"] 7 } 8 }, 9 "include": [...], 10 "references": [...] 11} 12
jsonCopy
Resolve alias
Setelah itu, sekarang buka file vite.config.ts
, dan default nya harusnya jika Anda pertama kali install akan seperti:
1import { defineConfig } from 'vite'; 2import react from '@vitejs/plugin-react'; 3 4export default defineConfig({ 5 plugins: [react()], 6}); 7
tsxCopy
Maka sekarang Anda bisa memperbaruinya file seperti:
1import { defineConfig } from 'vite'; 2import react from '@vitejs/plugin-react'; 3import * as path from 'path'; 4 5export default defineConfig({ 6 plugins: [react()], 7 resolve: { 8 alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], 9 }, 10}); 11
tsxCopy
Jika terlihat error, tidak ada masalah. Itu hanya typescript nya tidak kenal saja. Tetapi behind the scene ini sudah berhasil. Perhatikan kode berikut, saya ada komponen dengan nama NavLink.tsx
, dan kemudian saya akan import seperti:
1import React from 'react'; 2// import NavLink from '../components/NavLink'; 3import NavLink from '@/components/NavLink'; 4 5const Navbar = () => { 6 return ( 7 <nav className='flex min-h-screen flex-col justify-between bg-blue-600'> 8 <NavLink href='/'> 9 Home 10 </NavLink> 11 </nav> 12 ); 13}; 14 15export default Navbar; 16
tsxCopy
Fix Error
Dan terakhir, jika Anda tidak suka dengan error yang ada di file vite.config.ts
tadi, Anda bisa membuat semacam peraturan untuk menyuruh typescript mengabaikan syntax itu seperti:
1import { defineConfig } from 'vite'; 2import react from '@vitejs/plugin-react'; 3// @ts-ignore 4import * as path from 'path'; 5 6/** @type {import('vite').UserConfig} */ 7export default defineConfig({ 8 plugins: [react()], 9 resolve: { 10 // @ts-ignore 11 alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], 12 }, 13}); 14
tsCopy
Vue ?
Saya tidak berani bilang benar ini bekerja dengan vue.js
, namun harusnya akan sama saja. Semoga artikel ini bermanfaat, like dan share jika Anda suka. Saya Irsyad, saya akan melihat Anda lagi di artikel selanjutnya.