Babel.js 如何为基于TypeScript的React Native应用中的导入配置绝对路径?

kadbb459  于 2022-12-08  发布在  Babel
关注(0)|答案(8)|浏览(184)

为了避免在基于TypeScript的React Native应用中使用'../../../../'样式的相对导入,我希望配置该应用,以便可以改用绝对导入。
配置还支持Jest单元测试是很重要的。
我使用npx react-native init MyTestApp --template typescript创建了应用程序
React原生版本:0.60.5
要实现这一目标,我需要的确切配置是什么?

laximzn5

laximzn51#

要求

// 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。
1.就这样了

pw9qyyiw

pw9qyyiw2#

总结:
需要npm包babel-plugin-module-resolver,以及tsconfig.jsonbabel.config.js中的一些配置
循序渐进:
1.使用npm或Yarn安装babel-plugin-module-resolver

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

这适用于在React Native版本0.60.5上使用npx react-native init MyTestApp --template typescript创建的全新项目

flseospp

flseospp3#

如果您不想使用Babel插件
1.在src文件夹中创建一个新的package.json文件,如下所示。(将myapp更改为任何您想要的,它甚至可以是src。)

{
  "name": "myapp"
}

1.更新tsconfig.json文件

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

1.在.tsx文件中

import { MyThing } from 'myapp/MyThing';
xghobddn

xghobddn4#

适用于使用TypeScript且只想使用不带别名的绝对路径导入的任何人。
假设您的所有代码文件夹都在src中。
"baseUrl": "src"插入tsconfig.json内的compilerOptions对象中。
现在您可以在导入中使用绝对路径。

zpgglvta

zpgglvta5#

所有其他的答案对我来说都不适用于一个新创建的React Native + Typescript项目。
对我有效的方法是在tsconfig.json中同时设置baseUrlpaths

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

将NAME_IN_PACKAGE_JSON替换为package.json的名称字段。例如,如果名称字段为myapp,则可以执行以下操作:
import HomeScreen from "myapp/screens/HomeScreen";

iyzzxitl

iyzzxitl6#

如果你的项目根目录下有一个“src”文件,你所要做的就是在其中添加一个package.json文件,并在其中写入{ "name": "src" }
我在this video中找到了这个解决方案。

6qfn3psc

6qfn3psc7#

2022年更新

1.在你的src文件夹中创建一个package.json,并在其中添加{"name":"src"}
2.像这样更新您的tsconfig.json文件,

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

3.重新启动ide。
现在您可以像这样导入,

import MyComponent from 'src/components/MyComponent';
slwdgvem

slwdgvem8#

您可以使用5个简单步骤解决此问题,而无需弹出

第1步:将react-app-rewired添加到您的devDependencies中。

yarn add -D react-app-rewirednpm intall react-app-rewired --save-dev

步骤2:安装后,您可以将package.json默认ReactsJS脚本更改为:

"scripts": {  
  "start": "react-app-rewired start",  
  "build": "react-app-rewired build",  
  "test": "react-app-rewired test",  
  "eject": "react-app-rewired eject" 
}

步骤3:在根路径上创建一个名为tsconfig.paths.json的新文件,其内容如下:

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

提示1:您可以选择要使用的路径,例如:只需更改"paths": {}中的键

这同样适用于它的值:["src/shared/services/*"], ["src/shared/interfaces/*"], ["src/*"],请在此处使用相对路径。

步骤4:在"compilerOptions"之前,您需要扩展刚刚创建的tsconfig.paths.json

就像这样:

{
  "extends": "./tsconfig.paths.json",
  ...//rest of file infos compilerOptions, include... whatever
}

第5步:创建一个新文件config-overrides.js,在其中添加别名与相对路径:

const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.alias,
      'services': path.resolve(__dirname, 'src/shared/services'),
      'interfaces': path.resolve(__dirname, 'src/shared/interfaces')
    },
  };

  return config;
};

提示2:如果您使用的是**eslint**,请记住要有一个.eslintignore文件,并在其中添加config-overrides.js

重新启动IDE或文本编辑器,在我的例子中是VSCode。

完成!.现在只需运行yarn startnpm run start

相关问题