1

Hi, i have the following ES6 statement in a .js file(within vue.js project that uses webpack):

import my_value from 'path_to_folder1/folder2';  //after `from` keyword, I don't include index.js.

The above statement will be run in this first two steps:

step 1) webpack transpiles ES6 import syntax to require syntax,

for example:

import my_value from 'path_to_folder1/folder2';

will be transpiled to:

var my_value = require('path_to_folder1/folder2');

step 2) node.js will search and load (by default) an index.js file from folder2 folder.

step 3) is a node.js feature to default search and load index.js file, from a folder, in a require statement? is there any official documentation on this?

Can you tell me if first two steps are correct?

Then, I would like an answer for the step 3.

It's important. Thanks

Raffaele Iavazzo
  • 21
  • 1
  • 4
  • Maybe [this answer](https://stackoverflow.com/questions/21063587/what-is-index-js-used-for-in-node-js-projects) is what you're looking for. Cheers. NOTE: Ryan Dahl, Node.js creator, talks about some of, in his opinion, the `weak` points of Node.js here [10 things I regret about Node.js](https://www.youtube.com/watch?v=M3BM9TB-8yA) – Rubén S. García Oct 03 '20 at 20:14
  • webpack module resolution? https://webpack.js.org/concepts/module-resolution/ – Raffaele Iavazzo Oct 03 '20 at 22:34
  • I don't think that's the correct answer, did you find the pertinent explanation there? – Rubén S. García Oct 03 '20 at 23:56
  • I think so because Vue.js uses webpack, I would like a confirmation on this – Raffaele Iavazzo Oct 04 '20 at 06:42
  • in this case either webpack resolution or node.js resolution will be used – Raffaele Iavazzo Oct 04 '20 at 06:45
  • So in your opinion, in the above example, the import syntax is first converted to require syntax(by babel) and then node searches and loads the default index.js file from the folder2 directory. right? – Raffaele Iavazzo Oct 04 '20 at 07:46

1 Answers1

1

Node.js will first check if the require's parameter is a directory or a file. If:

  • it's a directory -> load index.js

  • if it's a file:

    • if the specified file exists -> load the file
    • if the specified file does not exist, add the extension .js to it and try to load. Often this is the approach you actually want to go with. Since you might have some TS files and then they are compiled to js... the compiler will figure this thing for you

Now, no, this is NOT necessarily how your import will be compiled. It depends on the configuration of your compiler. By default however, you're looking for the default export of the module. So by default if your import looks like this:

import my_value from 'path_to_folder1/folder2';

then it is actually interpreted as

const {default: my_value} = require('path_to_folder1/folder2');

now, if your path_to_folder1/folder2/index.js specifies export default blabla you're all set. If it doesn't, depending on the configuration of your transpiler you may end up with an error. If your transpiler allows default imports and your module does not have any default export, it will import an object containing all exports.

Kamil Janowski
  • 1,872
  • 2
  • 21
  • 43
  • thanks for the answer. Therefore in webpack vue.js project, babel transpiles --> import my_value from 'path_to_folder1/folder2'; to --> const {default: my_value} = require('path_to_folder1/folder2');. right? – Raffaele Iavazzo Oct 04 '20 at 09:11
  • yes. Alternatively, if you don't have the default export and you don't want to fight with the configuration (because I cannot now find the right config for the webpack to auto import no-default modules), you can always define your import as `import * as my_value from 'path_to_folder1/folder2';`. Then that will be transpiled as `var my_value = require('path_to_folder1/folder2'); ` – Kamil Janowski Oct 04 '20 at 09:17
  • how can i understand that [webpack resolution](https://webpack.js.org/concepts/module-resolution/) is not used instead? should I check if the webpack.config.js file is configured for the path resolution or not? – Raffaele Iavazzo Oct 04 '20 at 09:27