بنابراین، من معمولاً دوست دارم از نام مستعار در پروژه هایم استفاده کنم، نه تنها به این دلیل که خواندن و توسعه آن آسان تر است، از واردات جلوگیری می کند، بلکه به این دلیل که ردپای دیجیتال CO2 کمتری با کاراکترهای کمتر تولید می کنیم.
همانطور که شروع به استفاده کردم سریع در پروژه‌های شخصی‌ام، شروع به تحقیق در مورد چگونگی انجام آن کردم و در نهایت با جزئیاتی آشنا شدم که در اینجا برای هر کسی که ممکن است علاقه‌مند باشد، می‌گذارم.
اگر نمی دانید نام مستعار چیست، در اینجا یک رزومه وجود دارد:
هر روز در زندگی توسعه‌دهنده باید فایل‌ها را به دیگری وارد کنید و اگر روی یک پروژه بزرگ کار می‌کنید، مسیرهای واردات را به این صورت می‌بینید: ../../../../components.
این وحشتناک است، درست است؟ با نام مستعار می توانید این مشکل را حل کنید و اساساً آن را تغییر دهید: ../../../../componets به: @/components یا @components. و در این پست نحوه انجام این کار را با کمی توضیح نشان خواهم داد.
اول از همه، چگونه از مسیر استفاده کنیم؟
همانطور که باید بدانید، انواع گره روی پروژه‌های React with Typescript از قبل نصب نشده‌اند، اما باید از آن استفاده کنید path بسته به پیکربندی vite بعداً و شما باید این انواع را برای پروژه خود اضافه کنید. بنابراین، اول از همه، مطمئن شوید که دستور را اجرا کنید: npm install -D @types/node در ترمینال شما
برای اونایی که نمیدونن چیه -D به این معنی است که اساساً بسته را نصب می کند @types/node به عنوان یک وابستگی توسعه این وابستگی ها در محیط تولید استفاده نمی شوند، فقط زمانی که در حال کدنویسی هستید.
بیایید تایپ اسکریپت خود را پیکربندی کنیم!
برای اینکه Typescript بفهمد که می خواهید از نام مستعار استفاده کنید، باید مطمئن شوید که آن را تعریف کرده اید baseUrl و paths در فایل پیکربندی json شما (tsconfig.json) در داخل شما compilerOptions:
/* Aliases */
"baseUrl": "./src",
"paths": {
"@components/*": ["./components/*"],
"@pages/*": ["./pages/*"],
"@assets/*": ["./assets/*"],
"@styles/*": ["./styles/*"]
}
این خطوط اساسا به شما می گوید تایپ اسکریپت کجا می توان پایه مسیرهای نسبی را برای پیکربندی هر یک پیدا کرد.
وقت وایت است عزیزم!
حتی اگر پیکربندی کنید path و tsconfig.json، این هنوز کار نمی کند، چرا؟ خب باید بگی سریع برای حل نام مستعار خود نیز، در غیر این صورت، کار نخواهد کرد، زیرا سریع نمی دانم چه کار می کنی تایپ اسکریپت پیکربندی
یادت هست path بسته ای که استفاده از آن را با نصب انواع گره فعال کردید؟ اکنون زمان استفاده از آن است!
بنابراین، در مورد ما vite.config.ts فایل را باید اضافه کنیم resolve کلید و در داخل آن، alias کلیدی برای تعریف این نام مستعار نیز وجود دارد. بنابراین، پس از کلید افزونه، می توانیم این موارد را اضافه کنیم:
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@components": path.resolve(__dirname, "src/components"),
"@pages": path.resolve(__dirname, "src/pages"),
"@assets": path.resolve(__dirname, "src/assets"),
"@styles": path.resolve(__dirname, "src/styles"),
},
},
});
توجه: در مورد من، من فقط این چهار پوشه را برای وارد کردن و صادرات چیزها دارم، اما اگر چند تا دیگر دارید، می توانید مقدار نام مستعار مورد نظر خود را اضافه کنید!
امیدوارم کمک کند! با تشکر برای خواندن! اکنون می توانید با نام مستعار به کد بروید! خداحافظ بزرگ!
