javascript - Hvordan konfigurerer jeg absolutte paths for imports i TypeScript-baserte React Native-apper?

For å unngå '../../../../../'-stil relativ import i en TypeScript-basert React Native-app, vil jeg konfigurere appen slik at jeg kan bruke absolutte imports i stedet.

Det er viktig at konfigurasjonen også støtter Jest-enhetstester.

Jeg laget appen ved å bruke npx react-native init MyTestApp --template typescript

React Native-versjon: 0.60.5

Hva er den eksakte konfigurasjonen jeg ville trengt for å oppnå dette?

Svar #1

krav

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

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

Hvordan

Legg til denne Babel-plugin-pakken

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

Min 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'
  ]
};

Min 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"]
}

Start IDE-en på nytt.
Det er det.

Svar #2

Sammendrag :

npm-pakken babel-plugin-module-resolver er nødvendig, i tillegg til noe konfigurasjon i tsconfig.json og babel.config.js

Steg for steg:

Installer babel-plugin-module-resolver ved å bruke npm eller yarn.

npm i babel-plugin-module-resolver --save-dev

Or (If you're using yarn):

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

tsconfig.json: Legg til "baseUrl": "." i compilerOptions
babel.config.js: Legg til en nøkkel kalt plugins med følgende verdi:

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

Fullstendig konfigurering:

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: ['.']
      }
    ]
  ]
};

Dette er for et rent nytt prosjekt opprettet ved bruk av npx react-native init MyTestApp --template typescript på React Native versjon 0.60.5

Svar #3

Hvis du ikke vil bruke babel-pluginen

lag en ny package.json-fil inne i src-mappen med følgende. (endre myapp til hva du vil, det kan til og med være src.)

{
  "name": "myapp"
}

oppdater tsconfig.json-filen din

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

I din.tsx-fil