نحوه تنظیم یک مسیر مطلق در پروژه React TypeScript
برای تنظیم مسیرهای مطلق در یک پروژه React می توانید مراحل زیر را دنبال کنید:
وابستگی های مورد نیاز را نصب کنید:
npx create-react-app my-app --template typescript
npm i cargo
مسیرهای مطلق را پیکربندی کنید:
در tsjsconfig.json تغییر ایجاد کنید و فایل carco.config.js را در پوشه اصلی پروژه React خود با محتوای زیر ایجاد کنید:
tsjsconfig.json
پیکربندی baseUrl و مسیرها در tsconfig.json شما.
-
دایرکتوری پایه برای حل مسیرهای ماژول، دایرکتوری src است، زیرا “baseUrl” روی “src” تنظیم شده است.
-
نام مستعار برای مسیرهای ماژول در بخش “مسیرها” مشخص شده است. ما در اینجا دو نام مستعار تعریف کرده ایم:
“@اجزاء/“: این نام مستعار مربوط به مسیر است./components/. به عنوان مثال، وضوح “@components/Button” “./components/Button” خواهد بود.
نام مستعار “@utils/” مربوط به./utils/ مسیر. -
به عنوان مثال، وضوح “@utils/helpers” “./utils/helpers” خواهد بود.
-
مطمئن شوید که مسیرها و نام های مستعار را مطابق با سازمان پروژه خود تغییر دهید.
{
"compilerOptions":{
"baseUrl":"src",
"paths":{
//add paths line
"@components/*":[
"./components/*"
],
"@utils/*":[
"utils/*"
]
},
"target":"es5",
"lib":[
"dom",
"dom.iterable",
"esnext"
],
"allowJs":true,
"skipLibCheck":true,
"esModuleInterop":true,
"allowSyntheticDefaultImports":true,
"strict":true,
"forceConsistentCasingInFileNames":true,
"noFallthroughCasesInSwitch":true,
"module":"esnext",
"moduleResolution":"node",
"resolveJsonModule":true,
"isolatedModules":true,
"noEmit":true,
"jsx":"react-jsx"
},
"include":[
"src"
]
}
caraco.config.js
ویژگی tsConfigPath روی “./tsconfig.json” تنظیم شده است، که نشان دهنده مسیر فایلی است که پیکربندی TypeScript (tsconfig.json) در آن قرار دارد.
این فایل حاوی تنظیمات “baseUrl” و “paths” برای وضوح نام مستعار است.
const CracoAlias = require("craco-alias");
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
source: "tsconfig",
// baseUrl SHOULD be specified
// plugin does not take it from tsconfig
baseUrl: "./src",
// tsConfigPath should point to the file where "baseUrl" and "paths" are specified
tsConfigPath: "./tsconfig.json"
}
}
]
};