javascript - 摆脱相对路径 react (删除 "../..")

标签 javascript node.js reactjs import create-react-app

我已经下载了一个包含以下 package.json 的 React 项目:

{
  "private": true,
  "main": "src/index.js",
  "dependencies": {
    "@material-ui/core": "4.10.0",
    "@material-ui/icons": "4.9.1",
    "classnames": "2.2.6",
    "history": "4.10.1",
    "moment": "2.26.0",
    "node-sass": "4.14.1",
    "nouislider": "14.5.0",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-datetime": "2.16.3",
    "react-dom": "16.13.1",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.1",
    "react-slick": "0.26.1",
    "react-swipeable-views": "0.13.9"
  },
  "devDependencies": {
    "@babel/cli": "7.10.1",
    "@babel/plugin-proposal-class-properties": "7.10.1",
    "@babel/preset-env": "7.10.1",
    "@babel/preset-react": "7.10.1",
    "eslint-config-prettier": "6.11.0",
    "eslint-plugin-prettier": "3.1.3",
    "eslint-plugin-react": "7.20.0",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "prettier": "2.0.5"
  },
  "optionalDependencies": {
    "typescript": "3.9.3"
  },
  "scripts": {
    "start": "NODE_PATH=src/ react-scripts start",
    "build": "react-scripts build && gulp licenses",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint:check": "eslint . --ext=js,jsx;  exit 0",
    "lint:fix": "eslint . --ext=js,jsx --fix;  exit 0",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start",
    "build-package-css": "node-sass src/assets/scss/material-kit-react.scss dist/material-kit-react.css",
    "build-package": "npm run build-package-css && babel src --out-dir dist",
    "compile-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css",
    "minify-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.min.css --output-style compressed",
    "map-sass": "node-sass src/assets/scss/material-kit-react.scss src/assets/css/material-kit-react.css --source-map true"
  }
  
}

我不知道开发者是如何去掉代码中的相对路径的。 例如,他导入的模块如下:import Header from "components/Header/Header.js"; 尽管如果我尝试相同,我应该这样做:从“../../../src/components/Header/header.js”导入 header

原github链接: https://github.com/creativetimofficial/material-kit-react/

我已经下载并安装了这个,它工作正常。 但是当我尝试复制一些代码时,它不起作用。

最佳答案

使用 jsconfig.json 设置绝对路径而不是相对路径,如 documentation 中所述

在他使用的提供的项目中

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "*": ["src/*"]
    }
  }
}

这样他就可以使用绝对路径访问项目的所有文件夹和子文件夹中的所有文件,例如

import file from "component/file/file.js"

关于javascript - 摆脱相对路径 react (删除 "../.."),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65990549/

相关文章:

javascript - 使用 Node.JS 设计机器人,以随机超时和通用例程运行

javascript - 将图像复制到剪贴板

node.js - Ember.js、Express.js 和 Node.js 的 Assets 管道?

javascript - 如何使用 PHP 检测网页崩溃(不是浏览器崩溃)?

reactjs - VSCode 用户片段为 React 生成 useState?

javascript - 对数组的奇数索引处的所有数字进行平方

javascript - 如何在 React 组件的 read.onloadend 中访问 'this' ?

javascript - 为什么这个 JavaScript while 循环不在 Node 中运行?

javascript - 在 reactjs 中,我试图有一个按钮让用户保持登录状态

node.js - Restify 的 CORS 问题