Cài đặt alias trong dự án React Native

Alias là dạng import rút gọn trong các dự án React, giúp chúng ta có code nhìn đẹp hơn. Bạn có thể import dạng @components/Button thay vì ../../components/Button. Các bước để cài đặt alias trong ứng dụng React Native khá đơn giản.

1. Cài đặt

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

2. Setup babel.config.js

Định nghĩa các alias mà bạn sẽ sử dụng trong project, cái này sẽ giúp babel khi thông dịch code ts ra js thì sẽ hiểu dc các import alias.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            utils: "./src/utils",
            screens: "./src/screens",
            components: "./src/components",
            recoilStates: "./src/recoil",
            navigator: "./src/navigator",
          },
        },
      ],
    ],
  };
};

3. Setup tsconfig.json

Định nghĩa lại 1 lần nữa ở bên tsconfig.json, cái này giúp typescript server hiểu được các import alias khi development.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": "src",
    "paths": {
      "utils/*": [
        "utils/*"
      ],
      "components/*": [
        "components/*"
      ],
      "screens/*": [
        "screens/*"
      ],
      "recoilStates/*": [
        "recoil/*"
      ],
      "navigator/*": [
        "navigator/*"
      ]
    }
  }
}

4. Done 😄

Hãy thử rebuild project của bạn và trải nghiệm, nhớ là mỗi khi thay đổi file babel.config.js thì bạn phải restart metro server nhé (react-native start —reset-cache hoặc expo start -c).