خلاص شدن از شر مسیر دهی های طولانی در reactjs

خیلی از ما دیدم این مشکل رو که ما یک کامپوننت داریم داخل react به اسم ComponentB که توی 4 تا پوشه عقبتر از کامپوننت فعلی هست و میخوایم Import کنیم . اما باید چهار بار به عقب برگردیم . خیلی آزار دهنده است . نه؟این مقاله ترجمه مقاله دوست خوبم هست و با اجازه خودش نوشتم . لینک زیر ، اصل مقاله است : https://dev.to/mjraadi/simplify-the-require-import-paths-in-your-project-and-avoid-circles-of-hell-51bj خوب حالا بریم سر اصل مطلب . من یک کد به شکل زیر دارم :import NavBar from '../../components/NavBar';این مورد خیلی زشت کرده کد منو . میخوام به این تبدیل کنمش:import NavBar from 'components/NavBar';دقیقا مثل شیوه ای که از node_modules ایمپورت میکنیم . برای این کار باید از پلاگین :‌ babel-plugin-module-resolver استفاده کنیم https://github.com/tleunen/babel-plugin-module-resolver توضیحات سازنده:This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like ../../../../utils/my-utils, you can write utils/my-utils. It will allow you to work faster since you won't need to calculate how many levels of directory you have to go up before accessing the file.خوب همه چیز تمومه دیگه . فقط باید روی react پیاده کنیم . برای این که بتونیم تنظیمات babel رو انجام بدیم باید eject کنیم پروژه رو تا تنظیمات babel ایجاد بشن(البته میتونید eject نکنین و از react-app-rewired استفاده کنین و بدون eject همه تنظیمات رو override کنین .) . توجه کنید که این در صورتیه که شما از create-react-app استفاده میکنین . توضیحات محمد (نویسنده مقاله):In case you don't know what babel is, it's a JavaScript compiler which is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. If you're building an app with create-react-app or similar libraries, they're using babel behind the scene.طبق گفته محمد و چیزی که توی babel هست ، babel یک کامپایلر برای تغییر دادن ECMAScript15+ به پشته اصلی جاوا اسکریپت است . به همین دلیله که این ماژول میتونه خیلی کمک کنه . خوبیک پروژه تستی بسازیم :create-react-app babel-plugin-module-resolver-test-appحالا باید eject کنیم که بتونیم تنظیمات رو پیاده سازی کنیم :cd babel-plugin-module-resolver-test-app && npm run eject && npm iحالا پلاگین رو نصب میکنیم : npm install --save-dev babel-plugin-module-resolverحالا داخل package.json میریم و میبینیم که تنظیمات babel چجوریه :... "babel": { "presets": [ "react-app" ] }, ...چنین چیزی رو باید ببینیم . خوب کد بالا رو به کد زیر تغییر میدیم :..."babel": { "presets": [ "react-app" ], "plugins": [ ["module-resolver", { "root": ["./src"], "alias": { "dir1": "./src/Dir1", "dir2": "./src/Dir2" } }] ] },...داخل بلاک plugins اومدیم module-resolver رو معرفی کردیم . و یک سری جانشین معرفی شد . از این به بعد داخل این پروژه به مسیر src/Dir1 میگیم dir1 . پس مشکل رو داره برامون حل میکنه . میتونیم به هرچیزی که داخل Dir1 هست فقط با نوشتن dir1 برسیم . مثلا من میام داخل پوشه src/Dir2/ComponentA.js کامپوننت زیر رو میسازم :import React from 'react'; import ComponentB from 'dir2/ComponentB'; const ComponentA = () => ( <p> Hello from <ComponentB /> </p> ); export default ComponentA;خیلی راحت به کامپوننت ComponentB رفتم بدون اینکه بنویسم import ComponentB from "../../Dir2/ComponentB" . مرسی از محمد رعدیمیتونین از گیت محمد، پروژه رو clone کنین : https://github.com/mjraadi/babel-plugin-module-resolver-test-app