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

Question

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

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

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

反应本机版本：0.60.5

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

原文由 Svein Fidjestøl 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要求

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

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

如何

1. 添加这个babel插件包

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

1. 我的 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'
  ]
};

1. 我的 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"]
}

1. 重新启动 IDE。
2. 而已。

原文由 I Putu Yoga Permana 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

1. tsconfig.json ：添加 "baseUrl": "." 到 compilerOptions

2. 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 typescript 在 React Native 版本 0.60.5 上创建

原文由 Svein Fidjestøl 发布，翻译遵循 CC BY-SA 4.0 许可协议