JavaScript中基于相对路径导入文件

Question

I have such project structure:

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

How can I import firstFile.js from thirdFile.js ?

Something like import myFunc from '../firstFolder/firstFile'; in thirdFile.js , doesn't work.

Answer 1

Description

../ will go back 1 folder, this is why we go back two folders:

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

or these will start at the root directory

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

Answer 2

use=>

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

or

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

Answer 3

in ES5:

You should use two '..' to back 1 folder level

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

ES6 (ecmascript6):

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

Answer 4

If you use webpack you can tweak the loader to search for files relative to your base directory. Change your webpack.config.js to this

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

or, if your sources are all relative to ./src , use path.resolve('./src') . If you want to be more specific you can also take a look at resolve.alias (see the webpack docs here: https://webpack.js.org/configuration/resolve/ )

BTW: I'm using next.js in my application, which has its own webpack config, but you can modify it if you put something like

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

into your next.config.js , in order to modify the default one.