尝试在 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';

None 其中似乎有效。我也尝试了所有没有 @ 符号的方法（将其从包文件和导入语句中删除），但无济于事。

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

这是我的 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

将 babel-plugin-module-resolver 添加到 devDependencies。如果您有 .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 { 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 2

如果您正在使用 VSCode，IDE 的 Intellisense 不能只识别 package.json；包含一个 tsconfig/jsconfig JSON 文件 (TypeScript [ftw]/ JavaScript)

在compilerOptions中添加：

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

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

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

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

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

首先，您需要使用 yarn 或 npm 安装 babel-plugin-module-resolver。

完成后，打开项目的 .babelrc 文件，在 plugins 项下添加：

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

或者使用rootpackage.json中的

Answer 3

是我的错。

而不是像这样使用它：

import MyComponent from 'package/path/MyComponent'

我正在使用：

import MyComponent from 'package/path'（最后没有我的 class 文件）。

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

import Page from 'components/core/Page';

效果很好。

Answer 4

在tsconfig.json中添加以下内容：

"compilerOptions": {
    "baseUrl": "app"
...
}

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

Cannot resolve module while trying to organize modules in React Native

javascript

reactjs

react-native

es6-modules