Logo

菜单

发布于 2026-01-06 0 阅读
0

在 React Native 中使用模块解析器清理导入

在 React Native 中使用模块解析器清理导入

您好，React Native 社区！

最近一次面试中，面试官说：“我看了你在Github上的一些代码，看起来不错，但是为什么不使用模块解析器呢？导入语句不会让代码变得混乱吗？”

我记得当时我想：“哦，这很有道理，我为什么不这样做呢？”，因为巧合的是，我最近在一个为客户做的项目中开始使用 Babel 模块解析器，但我自己的作品集项目中却没有使用。

为什么我还需要另一个 Babel 插件？

模块解析器的作用在于提高代码可读性和开发者体验，因为它让组件导入更加便捷。此外，它对于快速扩展的项目也十分有利。

我们来看一个例子：

import Module from '../../../Module'
Enter fullscreen mode Exit fullscreen mode

以上内容可简化为：

import Module from 'components/Module'

// similarly

import Module from '@components/Module'
Enter fullscreen mode Exit fullscreen mode

如果你已经配置了 index.ts 文件，那就更好了。

import { Module } from '@components'
Enter fullscreen mode Exit fullscreen mode

入门

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

# or if you use npm

npm install --save-dev babel-plugin-module-resolver
Enter fullscreen mode Exit fullscreen mode

安装插件后，我们需要更新babel.config.js（也可以使用.babelrc），并将 'module-resolver' 添加到 babel 插件列表中。

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['.'],
        extensions: [
          '.ios.ts',
          '.android.ts',
          '.ts',
          '.ios.tsx',
          '.android.tsx',
          '.tsx',
          '.jsx',
          '.js',
          '.json',
        ],
        alias: {
          '@app/config': './app/config',
          '@app/context': './app/context',
          '@app/constants': './app/constants',
          '@app/layout': './app/layout',
          '@app/navigation': './app/navigation',
          '@app/screens': './app/screens',
          '@app/theme': './app/theme',
          '@app/utils': './app/utils'
        },
      },
    ],
  ],
};
Enter fullscreen mode Exit fullscreen mode
  • root指定项目主目录。通常，它被称为“app”或“src”。
  • 扩展功能允许您将插件限制为特定文件类型。
  • 别名功能允许您指定模块导入所需的所有快捷方式文件夹。

以上示例来自我的一个项目。
正如你所见，我们可以轻松地将其配置为任何类型的文件夹结构。

如果你正在启动一个新项目，并且正在寻找一个结构清晰、文件夹结构良好的模板，那么你可以看看react-native-boilerplate。

现在集成已经完成，让我们确保自动补全和智能感知功能也能正常工作。


注意：支持多个主流 IDE，您可以查看插件仓库babel-plugin-module-resolver以获取更多信息。


如果你正在使用 TypeScript，那么请将以下字段添加到你的tsconfig.json 文件中（TypeScript 是不是很棒？）

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "paths": {
      "*": ["./app/*"],
      "@app/utils": ["./utils/*"],
      "@components": ["./components/*"]
    }
   ...
  }
}
Enter fullscreen mode Exit fullscreen mode

或者，如果您使用的是 JavaScript，只需在您的项目中添加一个jsconfig.json文件，并添加上述字段，即可获得自动完成功能。

注意：请务必将路径放在方括号 [] 内。否则，TypeScript 将无法正确找到路径。

  • 项目运行

插件安装完成后，我们需要确保它能够正常工作。
在开始修改导入语句之前，我们需要执行以下操作：

  • 清理安卓和iOS的构建文件夹
rm -rf ios/build android/app/build
Enter fullscreen mode Exit fullscreen mode
  • 重置 npm 或 yarn 的缓存
yarn start -c

# or if you use npm

npm start --reset-cache
Enter fullscreen mode Exit fullscreen mode

现在你应该可以构建你的项目并开始更改导入内容了。

注意：如果您仍然遇到缓存问题，请重新检查您的babel.config.js和tsconfig.json，并尝试使用以下命令清除 watchman。

watchman watch-del-all && rm -rf $TMPDIR/react-* && rm -rf node_modules/ && npm cache verify && npm install && npm start --reset-cache
Enter fullscreen mode Exit fullscreen mode

如果你想找个例子，那就看看我某个项目中的这个提交吧。

希望这篇文章对您有所帮助，能够提高代码可读性，并改善您和您的团队的工作体验。

您在集成过程中遇到任何问题吗？欢迎留言或通过推特联系我。

祝您编程愉快！🎉

文章来源：https://dev.to/karanpratapsingh/cleaning-up-imports-using-module-resolver-in-react-native-58g8
使用 React、NextJS 和...
如何与非程序员沟通