React Native JS文件能否无文件夹路径获取？模块引入规则解惑

嘿，我来帮你把这两个问题理清楚！

一、两种JS引入方式的适用场景 #

咱们先拆解你提到的两种引入方式各自适合的场景：

1. 相对路径引入（./../folder/file.js） #

这种方式最适合项目内部的本地文件，尤其是：

• 文件处于同一模块/子目录下，或者层级关系比较固定的情况，比如你在src/screens/Home里引入同目录的HomeStyles.js，或者上层目录的src/utils/Api.js，用相对路径能直接体现文件间的层级关系，直观易懂。
• 项目规模较小，或者文件结构变动频率低的时候，相对路径的写法成本很低，不需要额外配置。

2. 模块名式引入（'myfile'） #

这种写法的适用场景更偏向于模块化、可复用的代码，常见情况包括：

• 第三方依赖包：比如你通过npm/yarn安装的react、react-native、lodash等，直接写import React from 'react'即可，Node.js和React Native的模块解析器会自动去node_modules目录里查找对应的包。
• 自定义模块别名：当项目结构较深，频繁写../../../../这种嵌套相对路径会很繁琐且易出错时，你可以通过构建工具（比如Babel）配置模块别名，把常用的目录映射成简短的名称。比如把src/components映射成@components，这样不管在哪个文件里都能写import Button from '@components/Button'，可读性和维护性大幅提升。
• 内部私有包：如果你的团队有自己发布的npm私有包（比如公司通用组件库、工具库），也可以直接用模块名引入，和第三方包的用法一致。

二、React Native中不用文件夹路径获取JS文件的方法 #

当然可以！React Native支持通过配置模块别名来摆脱冗长的相对路径，具体步骤如下：

1. 安装Babel插件babel-plugin-module-resolver：

npm install --save-dev babel-plugin-module-resolver
# 或者用yarn
yarn add --dev babel-plugin-module-resolver

2. 在项目根目录的babel.config.js（或.babelrc）中配置别名：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'], // 设置根目录，这样可以直接引入src下的文件
        alias: {
          '@components': './src/components',
          '@utils': './src/utils',
          '@screens': './src/screens',
          // 可以根据你的项目结构添加更多别名
        },
      },
    ],
  ],
};

配置完成后，你就可以直接用别名引入文件了，比如：

// 之前可能需要写 import Button from '../../components/Button'
import Button from '@components/Button';
import { fetchData } from '@utils/Api';

另外，如果你把自己的代码发布成了npm包（不管是公开还是私有），也能像引入第三方库一样直接用模块名引入，不需要写路径。

内容的提问来源于stack exchange，提问作者Lavaraju