Question

我有这样的项目结构：

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

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

import myFunc from '../firstFolder/firstFile';中thirdFile.js之类的内容，并不起作用。

Answer 1

描述

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

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

或者这些将从根目录

开始

import myFunc from /firstFolder/firstFile.js
import myFunc from ./firstFolder/firstFile.js
import myFunc from ~/firstFolder/firstFile.js

Answer 2

使用=＆GT;

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中的相对路径导入文件

4 个答案:

描述