如何告诉“import "始终从reactjs项目的" src/”目录读取文件

mrwjdhj3  于 2023-02-03  发布在  React
关注(0)|答案(2)|浏览(95)

我继承了一个react项目,这个项目在我上一台电脑上运行,但是现在它不能在我的新电脑上运行了,特别是,我忘记了如何使用npm start命令来知道项目目录在哪里。
例如,假设我有以下两个文件:

// src/template/Page.js
import LoginComponent from 'component/Login.js'

// src/component/Login.js
export default function Gallery() { return <div></div>;}

然后当我运行npm start时,我得到错误:

Module not found: Can't resolve 'component/Login.js' in 'src/template/Page.js'

我依稀记得在我的上一台计算机上,我使用了一些隐藏文件,或者可能是.env文件,告诉npm查找src/目录下的所有react组件,这样就可以从代码中的所有import语句中省略术语src/
有人知道如何告诉react或npm总是导入组件而不总是拼写出src/前缀吗?
注:我还看到包含以下文件的.vscode目录:

// .vscode/settings.json
{
  "editor.snippetSuggestions": "top",
  "files.associations": {
    "*.js": "javascriptreact"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": false
  },
  "compilerOptions": {
    "baseUrl": "src"
  }
}

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}/src"
        }
    ]
}

我想这些文件可能与我上次使其工作时的解决方案有关
在我的package.json中,我看到了这些行:

...
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}
...

另外,我的package.json显示我正在使用"react": "^16.6.1",而我的npm -v显示5.5.1。我不记得我在上一台计算机上使用的是什么npm版本。所以不确定这是否有关系。

e5nszbig

e5nszbig1#

您需要一个 jsconfig.json 来配置绝对导入(如果您使用的是TypeScript,则应该使用 tsconfig.json)。这个文件对于您的项目正常工作至关重要,因此您应该将其提交给源代码管理,这样就不必在每台计算机上重新创建它:

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

我不知道Create React App支持这个功能,今天我从你的问题中学到了一些东西。谢谢!

66bbxpm5

66bbxpm52#

我在我的.env文件中添加了这一行:

NODE_PATH=src

然后一切都正常了。摘自以下文档:https://nodejs.org/api/modules.html
如果NODE_PATH环境变量设置为冒号分隔的绝对路径列表,那么Node.js将在这些路径中搜索模块(如果在其他位置找不到模块)。
在Windows上,NODE_PATH由分号(;)而不是冒号。
NODE_PATH最初是为了支持在定义当前模块解析算法之前从不同路径加载模块而创建的。
NODE_PATH仍然受支持,但现在Node.js生态系统已经确定了定位依赖模块的约定,所以不太必要。有时,依赖NODE_PATH的部署会在人们不知道必须设置NODE_PATH时显示出令人惊讶的行为。有时,模块的依赖关系发生变化,导致在搜索NODE_PATH时加载不同的版本(甚至不同的模块)。
此外,Node.js将在以下GLOBAL_FOLDERS列表中搜索:

1: $HOME/.node_modules
2: $HOME/.node_libraries
3: $PREFIX/lib/node

其中$HOME是用户的主目录,$PREFIX是Node.js配置的node_prefix。
这主要是由于历史原因。
强烈建议将依赖项放在本地node_modules文件夹中。这样加载起来会更快、更可靠。

相关问题