如何在基于 TypeScript 的 React Native 应用程序中为导入配置绝对路径？

Question

为了避免在基于 TypeScript 的 React Native 应用程序中出现“../../../../”样式的相对导入，我想配置该应用程序，以便我可以使用绝对导入。

重要的是配置还支持 Jest 单元测试。

我创建的应用程序使用 npx react-native init MyTestApp --template typescript

反应本机版本：0.60.5

我需要实现这一目标的确切配置是什么？

Answer 1

要求

// Meh
import config from '../../../../../../../config';

// Awesome!
import config from '@cuteapp/config';

如何

1. 添加这个 babel 插件包

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

2. 我的 babel.config.js

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: {
          '@cuteapp': './app'
        }
      }
    ],
    'jest-hoist'
  ]
};

3. 我的 tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es2015", "es2015.promise", "es2016.array.include", "dom"],
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@cuteapp/*": ["app/*/index", "app/*"]
    },
    "noEmit": true,
    "resolveJsonModule": true,
    "target": "esnext",
    "types": ["jest"]
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js"]
}

4. 重新启动 IDE。
5. 就是这样。

Answer 2

概括：

所述NPM包babel-plugin-module-resolver是必要的，以及在一些配置tsconfig.json和babel.config.js

一步步：

1. babel-plugin-module-resolver使用 npm 或 yarn安装。

   npm i babel-plugin-module-resolver --save-dev
   
   # Or (If you're using yarn):
   
   yarn add --dev babel-plugin-module-resolver
   

2. tsconfig.json: 添加"baseUrl": "."到compilerOptions

3. babel.config.js：添加一个plugins使用以下值命名的键：

[
    [
      'module-resolver',
      {
        extensions: [
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.android.js',
          '.android.tsx',
          '.ios.js',
          '.ios.tsx'
        ],
        root: ['.']
      }
    ]
  ]

完整配置：

tsconfig.json：

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext",
    "baseUrl": "."
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

babel.config.js：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        extensions: [
          '.js',
          '.jsx',
          '.ts',
          '.tsx',
          '.android.js',
          '.android.tsx',
          '.ios.js',
          '.ios.tsx'
        ],
        root: ['.']
      }
    ]
  ]
};

这是针对使用npx react-native init MyTestApp --template typescriptReact Native 0.60.5 版创建的全新项目

Answer 3

如果你不想使用 babel 插件

1. 使用以下内容在文件夹内创建一个新package.json文件。src（更改myapp为您想要的任何内容，甚至可以是src。）

{
  "name": "myapp"
}

2. 更新您的 tsconfig.json 文件

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

3. 在你的 .tsx 文件中

import { MyThing } from 'myapp/MyThing';

Answer 4

2023 更新

package.json1.在你的文件夹中创建一个src并添加{"name":"src"}到其中。

tsconfig.json2.像这样更新你的文件，

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

3.重新启动你的IDE。

现在你可以像这样导入，

import MyComponent from 'src/components/MyComponent';

Answer 5

对于任何使用 TypeScript 并且只想使用不带别名的绝对路径导入的人。

假设您的所有代码文件夹都位于src.

插入"baseUrl": "src"到compilerOptions对象里面tsconfig.json。

现在您可以在导入中使用绝对路径。