react-native typescript路径别名

react-native路径别名

介绍

import导入模块的时候，需要使用相对路径，例如../../../../test, 如果相对路径太长了，不能够特别直观得看出模块的真实路径。最主要的如果某一个模块更换位置，有可能import路径都需要修改。

那如果使用路径别名，例如 @/atom/test, @代表src，会更直观一些

配置

1. 安装 babel-plugin-root-import

yarn add --dev babel-plugin-root-import

2. 配置babel

babel.config.js

module.exports = {
    ...
    plugins: [
        [
            "babel-plugin-root-import",
            {
                rootPathSuffix: "./src",
                rootPathPrefix: "@/"
            }
        ]
    ]
}

3. 配置tsconfig

tsconfig.json

{
    ...
    "compilerOptions": {
        ...
        "baseUrl": ".",
        "paths": {
            "@/*": [
                "src/*"
            ]
        },
        ...
    },
    ...
}

重启vscode生效