Categories
babel-plugin-module-resolver

Cài đặt định danh(alias) cho project với babel-plugin-module-resolver

Khi code một project React hoặc React Native trên VSCode thì VSCode sẽ tự động import đường dẫn đến file mà chúng ta sử dụng.

// Đường dẫn tới file import sẽ có dạng ../
import HaNoiStationDark from '../screens/HaNoiStationDark';
import HaNoiStationLight from '../screens/HaNoiStationLight';

const Tab = createBottomTabNavigator();

export default function BottomTab() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Station Dark" component={HaNoiStationDark} />
            <Tab.Screen name="Station Light" component={HaNoiStationLight} />
        </Tab.Navigator>
    );
}

Nếu quá nhiều đường dẫn như thế thì sau này chúng ta sẽ rất khó copy paste code thần thánh.

Giờ các bạn install cho mình 2 packages vào project nhé:

npm install --save-dev babel-plugin-module-resolver @babel/plugin-proposal-decorators

Khi install xong thì các bạn cần config 2 files:

  • babel.config.js
  • jsconfig.json
// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@screens': './src/screens',
          '@router': './src/router',
          '@resources': './src/resources',
        },
      },
    ],
  ],
};
// jsconfig.json 
{
    "compilerOptions": {
        "experimentalDecorators": true,
        "baseUrl": "./",
        "paths": {
            "@screens/*": [
                "src/screens/*"
            ],
            "@router/*": [
                "src/router/*"
            ],
            "@resources/*": [
                "src/resources/*"
            ],
        }
    }
}

Sau đó chúng ta chỉ cần sửa lại đường dẫn thì babel sẽ đọc được đường dẫn với alias mới

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import * as React from 'react';
import HaNoiStationDark from '@screens/HaNoiStationDark';
import HaNoiStationLight from '@screens/HaNoiStationLight';

const Tab = createBottomTabNavigator();

export default function BottomTab() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Station Dark" component={HaNoiStationDark} />
            <Tab.Screen name="Station Light" component={HaNoiStationLight} />
        </Tab.Navigator>
    );
}

Leave a Reply

Your email address will not be published. Required fields are marked *