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

خیلی از ما دیدم این مشکل رو که ما یک کامپوننت داریم داخل react به اسم ComponentB که توی 4 تا پوشه عقبتر از کامپوننت فعلی هست و میخوایم Import کنیم . اما باید چهار بار به عقب برگردیم . خیلی آزار دهنده است . نه؟

این مقاله ترجمه مقاله دوست خوبم هست و با اجازه خودش نوشتم . لینک زیر ، اصل مقاله است :

خوب حالا بریم سر اصل مطلب . من یک کد به شکل زیر دارم :

import NavBar from '../../components/NavBar';

این مورد خیلی زشت کرده کد منو . میخوام به این تبدیل کنمش:

import NavBar from 'components/NavBar';

دقیقا مثل شیوه ای که از node_modules ایمپورت میکنیم .

برای این کار باید از پلاگین :‌ 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 کنین :