使用绝对路径导入反应组件

Posted 2023-02-22

【中文标题】使用绝对路径导入反应组件

【英文标题】：Import react components with absolute path

【发布时间】：2017-06-19 00:10:59

【问题描述】：

这是我的测试文件

// /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/...）导入组件？

【问题讨论】：

如果在您的测试文件的同一级别有一个名为 imports 的目录，您应该在一个点上：import TextInput from "./imports/ui/textInput"

对不起，我错过了目录结构。我添加了组件和测试文件的位置路径，它基本上也在 /imports 内。

你可以像import TextInput from "../ui/textInput" in main.test.js 和import action1 from "../actions/myAction" 一样简单地导入。如果你想用绝对路径导入，那么你必须在你的 webpack.config 中做别名，然后像 import action1 from "imports/actions/myAction" 这样导入。

../actions/myAction 是从 main.js 导入的，而不是测试文件，它在组件上运行良好。而且我不需要在测试文件中导入它。在测试文件中，我只需要导入 main.js 组件和 textInput 来测试浅层渲染。如果造成混淆，我很抱歉。

github.com/tleunen/babel-plugin-module-resolver 为我工作

【参考方案1】：

使用 webpack(v4) 和 babel，您可以在目录中提供绝对路径。 按着这些次序 在你的 .babelrc 文件中，为插件创建这个条目。确保你的 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"] 

希望这些条目有所帮助。

【参考方案2】：

如果您使用 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

【参考方案3】：

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

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

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

【参考方案4】：

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

  "compilerOptions": 
    "baseUrl": "src"
  

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

【讨论】：

"plugins": ["@babel/plugin-proposal-export-default-from"] 刚刚在 package.json#babel 中添加了这个插件。希望它对你有用。

@Daniels 解决方案运行良好，无需为像这样微不足道的事情添加另一个插件

baseUrl 应该是 . 而不是所述的“进口”一词

@vsync 感谢您的反馈，这是我这边的错字。它应该是您要从中设置 baseUrl 的目录。就我而言，它是“src”

【参考方案5】：

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

您将在其中添加NODE_PATH=src/

就是这样

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

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

【讨论】：

现在不推荐使用 jsconfig.json 文件：***.com/questions/56437517/…

【参考方案6】：

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

  "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 的冲突的风险。

【讨论】：

嘿，这看起来很有希望。几天后我会试一试，并在这里提供更新。感谢您的投入！

抱歉更新晚了，但是这个解决方案很有效！安装了解析器模块并设置了根，现在我可以使用import .. from '/imports/foo。谢谢。