如何在基于 TypeScript 的 React Native 应用程序中为导入配置绝对路径? [英] How do I configure absolute paths for imports in TypeScript based React Native apps?

问题描述

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

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

我使用 npx react-native init MyTestApp --template typescript

创建了应用程序

React Native 版本:0.60.5

我需要什么配置才能实现这一点?

解决方案

要求

//嗯从'../../../../../../../config'导入配置；//惊人的！从@cuteapp/config"导入配置；

如何操作

1. 添加这个 babel 插件包

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

2. 我的babel.config.js

module.exports = {预设:['module:metro-react-native-babel-preset'],插件: [[require.resolve('babel-plugin-module-resolver'),{cwd: 'babelrc',扩展名: ['.ts', '.tsx', '.js', '.ios.js', '.android.js'],别名:{'@cuteapp': './app'}}],'开玩笑的人']};

3. 我的tsconfig.json

<代码>{编译器选项":{allowJs":真，allowSyntheticDefaultImports":真，esModuleInterop":真，isolatedModules":真，jsx":反应"，lib":[es2015"、es2015.promise"、es2016.array.include"、dom"]、严格":真实，模块分辨率":节点"，baseUrl":./"，路径":{"@cuteapp/*": ["app/*/index", "app/*"]},noEmit":真，resolveJsonModule":真，目标":esnext"，类型":[开玩笑"]},排除":[node_modules"、babel.config.js"、metro.config.js"]}

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

In order to avoid '../../../../' style relative imports in a TypeScript based React Native app, I would like to configure the app so that I can use absolute imports instead.

It is important that the configuration also supports Jest unit tests.

I created the app using npx react-native init MyTestApp --template typescript

React Native version: 0.60.5

What is the exact configuration I would need to achieve this?

解决方案

Requirement

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

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

How To

1. Add this babel plugin package

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

2. My 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. My 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. Restart the IDE.
5. That's it.

这篇关于如何在基于 TypeScript 的 React Native 应用程序中为导入配置绝对路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！