使用绝对路径导入 React 组件
Import react components with absolute path
这是我的测试文件
// /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/...
)?
我的文件结构与您的完全相同。为了教 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 的冲突的风险。
另一个解决方案是在项目的根目录中创建一个 .env
文件。
您将在其中添加 NODE_PATH=src/
就这些
保存文件并在终端中重新启动您的开发环境。
之后,您将检查项目并相应地更新一些导入语句。
解决相对路径导入问题的更好方法是在 package.json
文件旁边创建 jsconfig.json
文件。
{
"compilerOptions": {
"baseUrl": "src"
}
}
那么 import { action1 } from "actions/myAction";
就可以了
我在 package.json 文件中设置了 jest 配置(在“jest”键下)。所以我刚刚添加了这一行:
"modulePaths": ["<rootDir>/src/"]
这对我有用。我希望它可以帮助别人。
如果您使用的是 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
使用 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"]
}
希望这些条目对您有所帮助。
这是我的测试文件
// /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/...
)?
我的文件结构与您的完全相同。为了教 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 的冲突的风险。
另一个解决方案是在项目的根目录中创建一个 .env
文件。
您将在其中添加 NODE_PATH=src/
就这些
保存文件并在终端中重新启动您的开发环境。
之后,您将检查项目并相应地更新一些导入语句。
解决相对路径导入问题的更好方法是在 package.json
文件旁边创建 jsconfig.json
文件。
{
"compilerOptions": {
"baseUrl": "src"
}
}
那么 import { action1 } from "actions/myAction";
就可以了
我在 package.json 文件中设置了 jest 配置(在“jest”键下)。所以我刚刚添加了这一行:
"modulePaths": ["<rootDir>/src/"]
这对我有用。我希望它可以帮助别人。
如果您使用的是 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
使用 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"]
}
希望这些条目对您有所帮助。