尝试在React Native中组织模块时无法解析模块

Question

我是第一次接触React Native，并且正在尝试将我的React Native类组织到模块中，以摆脱"import from '../../../“的混乱。下面是我非常简单的文件夹结构：

​

​

按照here的教程，我为每个文件夹构建了我的package.json：

{
    "name": "@foldername"
}

现在，我正在尝试导入Page (目前它只是一个组件超类，在文件中作为默认导出)：

import Page from '@app/components/core';

但是它不能被解决。我也尝试过：

import Page from '@app/@components/@core';

import { Page } from '@app/@components/@core';

import { Page } from '@app/components/core';

import { Page } from 'app/components/core';

它们似乎都不起作用。我也尝试过不带@符号(从包文件和import语句中删除它)的所有方法，但都没有用。

我如何组织我的组件以这种方式工作(如果我知道前面的@符号是做什么的，那就太好了，因为我也看过一些没有它的教程)。

这是我根文件夹中的package.json，如果它有帮助的话(没碰过它，这是react-native init创建的方式)：

{
  "name": "redacted",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.3"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/runtime": "^7.4.2",
    "babel-jest": "^24.5.0",
    "jest": "^24.5.0",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

是我的错。

而不是像这样使用它：

import MyComponent from 'package/path/MyComponent'

我使用的是：

import MyComponent from 'package/path' (末尾没有我的类文件)。

我已经正确地导入了它(还删除了app包和@前缀，并在其package.json文件中将components作为包直接引用)(包括组件名称)：

import Page from 'components/core/Page';

它工作得很完美。

Answer 2

向devDependencies添加babel-plugin-module-resolver。如果你有.babelrc，只需删除它并添加babel.config.js即可。并在那里添加别名。它应该看起来像这样

function babelConfig(api) {
  if (api) {
    api.cache(false);
  }

  const presets = ['module:metro-react-native-babel-preset'];
  const plugins = [
    [
      'module-resolver',
      {
        alias: {
          appColors: './src/Colors',
          appConstants: './src/Constants',
          components: './src/Components',
          screens: './src/Screens',
          utils: './src/utils'
        },
        cwd: 'babelrc'
      }
    ]
  ];

  return {
    presets,
    plugins
  };
}

module.exports = babelConfig;

然后，您可以像这样使用import

import { YourComonent } from 'components';

确保已导出为默认设置。此外，不要尝试用大写字母设置别名

这适用于最新的react-native (0.59.3)。

这是我的devDependencies

devDependencies": {
    "@babel/core": "7.4.0",
    "@babel/runtime": "7.4.2",
    "@react-native-community/eslint-config": "0.0.3",
    "babel-eslint": "8.2.2",
    "babel-jest": "24.5.0",
    "babel-plugin-module-resolver": "^3.2.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.10.0",
    "enzyme-to-json": "^3.3.5",
    "eslint": "5.15.3",
    "eslint-config-airbnb": "16.1.0",
    "eslint-plugin-import": "2.12.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "7.9.1",
    "eslint-plugin-react-native": "3.2.1",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.3"
  },

Answer 3

如果您使用的是VSCode，那么集成开发环境的Intellisense不仅可以识别package.json；还可以包含一个tsconfig/jsconfig JSON文件(TypeScript ftw/ JavaScript)

在compilerOptions add中：

"paths" : {
    "@alias1*" : ["./alias1/*"],
     .....
  }

你所有的别名。然后编辑器应该会拿起你的文件。

https://code.visualstudio.com/docs/languages/jsconfig

如果您选择不使用VSCode，请使用Babel：

如果您的项目不使用Webpack -例如，如果您正在使用React Native，您可以使用.babelrc文件和babel插件来设置别名。

首先，你需要安装babel-plugin-module-resolver和yarn或者npm。

完成此操作后，打开项目的.babelrc文件，并在插件键下添加以下内容：

[
  'module-resolver',
  {
    root: ['./src'],
    alias: {
      myAlias: './src',
    },
  },
];

或者使用根目录中的package.json