详解React Native中如何使用自定义的引用路径

RN的相对路径地狱

我刚接触RN时,就发现所有的demo中给出来的路径都是相对路径,我自己的练习项目中想改成自定义的绝对路径,但是发现并没有我做前端时熟悉的webpack.config.js,所以也就不知道该怎么改了。伴随着RN的学习和开发练习,我的代码也变得越来越多,越来越复杂,我逐渐发现RN的相对路径越来越麻烦,比如我把某个文件移动到另一个不同深度的文件夹中,那么就需要把所有引用这个文件的地方都改一遍。请看下面这些例子,这些小点点,晃得我眼晕。

import { deviceInfo } from '../../utilities/device'
...
import { API, DEV } from '../../../config/api'
...
import { Headers } from '../../widgets/nav'
...
import { basic } from '../../styles/theme'
...

RN的自定义路径需要的依赖

作为前端开发时熟悉的webpack.config.js,在RN的脚手架中并没有看到,但是要知道,webpack.config.js里用来自定义import路径的resolve.alias最终目的也是让babel在翻译代码时,能够找到正确的路径。所以RN里想用自定义的引用路径,还得靠babel的配置才行。

  • 安装依赖babel-plugin-module-resolver
yarn add babel-plugin-module-resolver -D
  • 配置babel.config.js
plugins: [
    [
      require.resolve('babel-plugin-module-resolver'),
      {
        extensions: ['.js', '.jsx'],
        root: ['.'],
        alias: {
          utilities: './src/utilities',
          config: './src/config',          
          widgets: './src/widgets',
          styles: './src/styles'
        }
      },
    ],
  ]
  • 配置jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "utilities": ["./src/utilities/*"],
      "config": ["./src/config/*"],
      "widgets": ["./src/widgets/*"],
      "styles": ["./src/styles/*"],
    }
  }
}

RN脚手架默认的情况下,是没有这个文件的,需要自己新建。

  • 把相对路径都改成自定义引用
import { deviceInfo } from 'utilities/device'
...
import { API, DEV } from 'config/api'
...
import { Headers } from 'widgets/nav'
...
import { basic } from 'styles/theme'
...
  • 重启
yarn start

此时我发现,自定义的路径并没有起作用,Metro报错说找不到路径。因为我的所有React组件的定义,都是以jsx为文件后缀的。我在项目里使用了eslint-plugin-react这个eslint插件,它的推荐规则就是要React的组件的文件后缀为jsx。当我把文件后缀改成js后,代码就能正常运行了。

我觉得文件后缀为jsx的情况下,jsconfig.js也能通过某种方式起作用,可惜我现在还不知道。

解决自定义引用路径导致的eslint报错问题

如果你使用了eslint-plugin-react,那么当你用js作为React组件的文件后缀时,eslint会报错。为了解决自定义引用路径问题,我只能牺牲掉这条eslint的rule。在.eslintrc.js加上这一条rule,就可以解决掉它。

rules:[
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx']}]
]

如果你使用了airbnb或者单独引用了eslint-plugin-import,那么当你利用babel-plugin-module-resolver成功解析了自定义引用路径的同时,eslint就会因为无法找到这些路径而报错。因为涉及到整个项目的所有文件,不可能在文件里简单的ignore某个rule来消除错误,而是需要在.eslintrc.js里覆盖eslint-plugin-import的import/no-unresolved这条rule才行。

rules:[
    'import/no-unresolved': [2, { ignore: ['^utilities', '^config', '^widgets', '^styles']}]
]

至此,解决了自定义引用路径问题,同时避免了eslint的报错。

以上就是详解React Native中如何使用自定义的引用路径的详细内容,更多关于React Native自定义引用路径的资料请关注脚本之家其它相关文章!

你可能感兴趣的:(详解React Native中如何使用自定义的引用路径)