使用绝对路径导入 React 组件

Question

这是我的测试文件

// /imports/components/main.test.js
import React from 'react'
import { shallow, mount } from 'enzyme'
import Main from './main'
import TextInput from "/imports/ui/textInput"
...

并且 main.js 有

// /imports/components/main.js
import { action1 } from "/imports/actions/myAction"

但是当我运行测试时它抛出一个错误，说

Cannot find module '/imports/actions/myAction' from 'main.js'

如果我评论 import './main'，导入 TextInput 会发生同样的事情。我在 node_modules.

中导入模块没有问题

如何告诉 Jest 或 webpack 使用项目目录中的绝对路径导入组件（即 import Foo from /imports/...）？

Answer 1

我的文件结构与您的完全相同。为了教 Jest 使用以 / 开头的导入，我使用 babel-plugin-module-resolver 及其方便的 root 选项。我的 Jest .babelrc 看起来像这样：

{
  "presets": ["es2015", "meteor"],
  "plugins": [
    "transform-class-properties",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    "transform-react-remove-prop-types",
      ["module-resolver", {
      "root": ["../"],
      "alias": {
        "react-router-dom": "react-router-dom/umd/react-router-dom.min.js",
        "redux": "redux/dist/redux.min.js",
        "react-redux": "react-redux/dist/react-redux.min.js"
      }
    }]
  ]
}

因为我使用的是自定义其根导入的 Meteor，所以我将我的 Jest 用法和配置隐藏到存储库根目录的 .jest 目录中，这样我就可以拥有一个特定的 .babelrc 而无需冒着与 Meteor 的冲突的风险。

Answer 2

另一个解决方案是在项目的根目录中创建一个 .env 文件。

您将在其中添加 NODE_PATH=src/

就这些

保存文件并在终端中重新启动您的开发环境。

之后，您将检查项目并相应地更新一些导入语句。

Answer 3

解决相对路径导入问题的更好方法是在 package.json 文件旁边创建 jsconfig.json 文件。

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

那么 import { action1 } from "actions/myAction"; 就可以了

Answer 4

我在 package.json 文件中设置了 jest 配置（在“jest”键下）。所以我刚刚添加了这一行：

"modulePaths": ["<rootDir>/src/"]

这对我有用。我希望它可以帮助别人。

Answer 5

如果您使用的是 Create React App，您可以在 jsconfig.json 中设置绝对导入路径（需要在新的 JavaScript 模板中创建）或 tsconfig.json (已在项目的根目录中的 TypeScript 模板中创建）以供您使用。

示例：

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

官方文档：https://create-react-app.dev/docs/importing-a-component/#absolute-imports

Answer 6

使用 webpack(v4) 和 babel，您可以在您的目录中提供绝对路径。按着这些次序在你的 .babelrc 文件中，为 plugins.Make 创建这个条目，确保你的 package.json 中也有 babel-plugin-root-import。

"plugins": [
    [
        "babel-plugin-root-import",
        {
          "paths": [
            {
              "rootPathPrefix": "~",
              "rootPathSuffix": "./"
            },
            {
              "rootPathPrefix": "@src",
              "rootPathSuffix": "src"
            },
            {
                "rootPathPrefix": "@any-other-folder",
                "rootPathSuffix": "src/client/../any-other-folder"
              }
          ]
        }
      ]
]

现在，如果你运行进入 eslint 问题，你可以在你的 eslintrc 中添加这些行：

"settings": {
"import/resolver": {
  "babel-plugin-root-import": [
    {
      "rootPathPrefix": "@src",
      "rootPathSuffix": "src"
    },
    {
      "rootPathPrefix": "@any-other-folder",
      "rootPathSuffix": "src/client/../any-other-folder"
    }
  ]
 }
}

现在要让您的编辑器识别这些路径，您可以在 jsconfig 文件中创建此条目。

{
"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["/*"],
      "@src/*": ["src/*"],
      "@any-other-folder/*": ["src/client/../any-other-folder/*"] ==> absolute path to any other folder
    }
  },
  "exclude": ["node_modules"] 
}

希望这些条目对您有所帮助。

使用绝对路径导入 React 组件

Import react components with absolute path

reactjs

webpack

jestjs

enzyme