根据 JavaScript 中的相对路径导入文件

Question

我有这样的项目结构：

- MyApp
`- firstFolder
 `- firstFile.js
`- secondFolder
 `- thirdFolder
  `- thirdFile.js

如何从 thirdFile.js 导入 firstFile.js？

thirdFile.js 中的 import myFunc from '../firstFolder/firstFile'; 之类的东西不起作用。

Answer 1

描述

以下是路径选项：

../ 将返回 1 个文件夹，这就是我们返回两个文件夹的原因：

import myFunc from ../../firstFolder/firstFile

因此 .. 将我们带回 secondFolder 然后我们需要再返回一个文件夹 .. 到 MyApp 文件夹中。现在我们可以向前遍历 firstFolder 然后指向 firstFile.

或 ./ - 这是当前工作目录 (pwd)，它将是 thirdFolder 从这里我们需要返回 2 个目录或 ../..

import myFunc from ./../../firstFolder/firstFile

其他目录路径选项：

由于您没有指定完整路径，因此这些路径不完整

/ - 将从操作系统的根目录开始

import myFunc from /fullPathtoProject/MyApp/firstFolder/firstFile

~/这是当前用户的主目录

import myFunc from ~/pathFromHomeDirectory/MyApp/firstFolder/firstFile

Answer 2

使用=>

import myFunc from '../../firstFolder/firstFile';

或

import * as myFunc from '../../firstFolder/firstFile';

Answer 3

在 ES5 中：

您应该使用两个“..”来备份 1 个文件夹级别

var myFunc = require('../../firstFolder/firstFile');

ES6 (ecmascript6):

import myFunc from '../../firstFolder/firstFile';

Answer 4

如果你使用 webpack，你可以调整加载器来搜索相对于你的基本目录的文件。把你的 webpack.config.js 改成这个

resolve: {
  modules: [
    path.resolve('./'),
    path.resolve('./node_modules')
  ]
},

或者，如果您的来源都与 ./src 相关，请使用 path.resolve('./src')。如果您想更具体一些，您还可以查看 resolve.alias（请参阅此处的 webpack 文档：https://webpack.js.org/configuration/resolve/）

顺便说一句：我在我的应用程序中使用了 next.js，它有自己的 webpack 配置，但是如果你输入类似

的东西，你可以修改它

const path = require('path');
module.exports = ({
    webpack: (config, options) => {
        config.resolve.modules.push( path.resolve('./') )
        return config
    },
})

进入你的next.config.js，以便修改默认的

根据 JavaScript 中的相对路径导入文件

Import file based on relative path in JavaScript

javascript

commonjs

requirejs

描述

其他目录路径选项：