I realized that I didn't fully grasp the export and import in ES6, so I did some research.
How to Use Export
The export statement is used to export functions, objects, or primitives from a specified file (or module). Source: MDN - Export
Here, export is close to the meaning of defining something.
There are two types of exports.
Named Exports
export { hogeFunction }; // Exporting a declared function
export const hoge = 1; // Exporting a constant; let and var are also allowed.
You can also export using from.
export * from 'Hoge'; // Wildcard
export { hoge, moge, huge } from 'hogemogehuge'; // Multiple exports
export { importHoge as hoge, importMoge as moge } from 'hogemoge'; // Alias
Default Exports
export default function() {}
export default class() {}
default means that "if nothing is specified during import, that class or function will be called." If you want to call a class or function other than default during import, you specify the class or file name in {}.
How to Use Import
The import statement is used to import functions, objects, or primitives that have been exported from external modules or other scripts. Source: MDN - Import
There are also two types of imports.
Named Imports
import * as hoge from "Hoge"; // Wildcard
import {hoge} from "Hoge"; // Importing only the specified one
import {hoge, moge} from "HogeMoge"; // Multiple imports
import {hogeHoge as aliasHoge} from "HogeHoge"; // *1
import {hogeHoge as aliasHoge, mogeMoge as aliasMoge} from "MogeMoge"; // *2
import "Hoge"; // Importing the entire module
// *1 Importing the entire module and specifying some members.
// *2 Specifying member names to import.
Strictly speaking, this involves scope, but please refer to the reference site for that.
Default Import
import hoge from "Hoge"; // The default member is called.
Note
Importing a default member with a named import will result in an error.
Thoughts
I feel like I still need to catch up on modern JavaScript, so I need to study more.. (ยดใปฯใป`)
