About JS import and require 引入机制

In both import (ES6 modules) and require (CommonJS), modules can export and import different types of values. However, the way named exports and default exports work is quite different between the two systems. Let’s break it down.

1. Named Exports vs Default Exports

Named Exports (ES6 Modules)

In ES6 modules (import/export), named exports allow you to export multiple variables, functions, or classes by name from a module. When importing them, you must reference their exact name.

• Exporting named values:

  // myModule.js
  export const myValue = 42;
  export function myFunction() {
    console.log('Hello from myFunction');
  }
  

• Importing named values:

  // main.js
  import { myValue, myFunction } from './myModule.js';
  
  console.log(myValue); // 42
  myFunction(); // "Hello from myFunction"
  

• You can also rename them while importing:

  import { myFunction as renamedFunction } from './myModule.js';
  

Default Exports (ES6 Modules)

ES6 modules also support default exports, which allow you to export a single value or object as the “default” export for that module. You can only have one default export per module.

• Exporting a default value:

  // myModule.js
  const myDefaultValue = 42;
  export default myDefaultValue;
  

• Importing the default export:

  // main.js
  import myDefault from './myModule.js'; // No curly braces required
  
  console.log(myDefault); // 42
  

With default export, you don’t need to use the exact name of the exported variable when importing. You can name it anything.

2. Exports in CommonJS (require)

In CommonJS (the require system), there’s no concept of default exports or named exports the way ES6 modules have. Instead, everything that is exported is assigned to module.exports, and when you require the module, you get whatever object, function, or value is assigned to module.exports.

• Exporting using module.exports:

  // myModule.js
  const myValue = 42;
  function myFunction() {
    console.log('Hello from myFunction');
  }
  
  module.exports = { myValue, myFunction };
  

• Requiring the module:

  // main.js
  const myModule = require('./myModule.js');
  
  console.log(myModule.myValue); // 42
  myModule.myFunction(); // "Hello from myFunction"
  

In CommonJS, the whole module is typically exported as an object, and individual properties of that object are accessed.

Key Differences between import/export (ES6) and require (CommonJS)

1. Exporting and Importing Style:

• ES6 Modules (import/export):

  • Named exports allow exporting multiple items by name.
  • Default exports allow exporting a single “primary” value.
  • Syntax is more declarative and structured.

  // Named exports
  export const myValue = 42;
  export function myFunction() {};
  
  // Default export
  export default myValue;
  

• CommonJS (require/module.exports):

  • Everything is exported as a single object (via module.exports).
  • You access properties of that object using require.

  module.exports = {
    myValue: 42,
    myFunction: function() {}
  };
  

2. Importing Syntax:

• ES6 import:

  • Named imports use curly braces.
  • Default imports don’t require curly braces.
  • ES6 modules can mix named and default exports.

  import { myFunction, myValue } from './myModule.js'; // Named imports
  import myDefault from './myModule.js'; // Default import
  

• CommonJS require:

  • You import the whole exported object and access properties from it.

  const myModule = require('./myModule.js');
  console.log(myModule.myValue);
  myModule.myFunction();
  

3. Default Exports Handling:

• ES6 Modules:

  • The concept of default exports is explicit.

  export default myFunction;
  

• CommonJS:

  • There is no concept of a default export per se. If you want to mimic a “default export” in CommonJS, you just assign the value directly to module.exports:

  // Mimicking default export in CommonJS
  module.exports = myFunction;
  

  When you require this module, you’ll get the function directly:

  const myFunction = require('./myModule.js');
  

3. Mixing Named and Default Exports

• ES6 Modules: You can mix named and default exports in a single module.

  export const myValue = 42;
  export default function() {
    console.log('Default function');
  }
  

• CommonJS: There’s no direct mechanism to mix exports like this. The closest approach would be assigning properties to module.exports for multiple named exports.

Summary of Differences Between require and import in Exports

Feature	import/export (ES6 Modules)	require/module.exports (CommonJS)
Named exports	Yes, using export {} and import {}	Can export an object with named properties
Default export	Yes, export default	No native concept, but can export a single value
Importing syntax	Named exports require {}, default without {}	Everything is imported as an object
Mixing named and default	Allowed	Not directly supported, but can be emulated
Loading type	Static (at the beginning of file)	Dynamic (can be loaded anywhere in the code)
Flexibility	More flexible (named, default, mixed)	Less flexible (everything in one export object)

In modern JavaScript, the ES6 module system (import/export) is more powerful and flexible than CommonJS (require/module.exports), which is why it is preferred for most new projects, including in environments like Cocos Creator.