تنظيف المسار المطلق React Native

عمر سالم2 · 23 مارس 2021

import React from 'react';
import { View } from 'react-native';

// هل هناك طريقة أفضل؟
import constants from '../../../../constants';

const UserStatistics = ({ stats, updateStats }) => {};

export default App;

هل هناك طريقة أفضل لاستيراد وحدات بعيدة باستخدام React Native (Babel)؟

إسلام عبدالعزيز · 23 مارس 2021

قم بتحميل بلجن module-resolver لـ Babel:

yarn add --dev babel-plugin-module-resolver

وبداخل ملف الـ configurations في tsconfig.json، قم بضبط المسارات هكذا:

{
	"compilerOptions": {
		"paths": {
			"@app/*": ["app/*/index", "app/*"]
		}
	}
}

والآن، سنستخدم الـ plugin الذي قمنا بتحميله:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        cwd: 'babelrc',
        extensions: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],
        alias: {
          '@app': './app'
        }
      }
    ],
    'jest-hoist'
  ]
};