For front-end modularization is always confused, today in-depth study of front-end modularization, thoroughly understand CommonJs and ES6 Module, I hope this article can bring you help.

CommonJS

The module

CommonJS specifies that each file is a module. The biggest difference between inserting a JS file into a page via script tag and encapsulating it as a CommonJS module is that the top-level scope of the former is the global scope, which will pollute the global environment when declaring variables and functions. The latter form a scope belonging to the module itself, all variables and functions can only be accessed by themselves, invisible to the outside world.

export

Exports are the only way a module can expose itself. In commonJS, you can export the contents of a module through MoDUL E.xports. The following code exports an object containing the name and add attributes.

module.exports = { name: 'calculater', add: function(a, b){ return a+b; }}Copy the code

CommonJS also supports direct exports for ease of writing.

exports.name = 'calculater';
exports.add = function(a, b){
    return a+b;
}
Copy the code

Exports of exports

var module = {
    exports:{}
};
var exports = module.exports;
Copy the code

Watch out for incorrect usage:

  1. Do not assign a value to exports directly, otherwise the export will fail. The following code assigns a value to exports to point to a new object. Module. exports is still an empty object, so the name property is not exported.
exports = {
    name: 'calculater'
}
Copy the code
  1. Exports/module.exports/exports Exports the add attribute through exports, then reassigns module.exports to another object, which causes the add attribute to be lost, and exports only name.
exports.add = function(a,b){
    return a+b;
}
module.exports = {
    name: 'calculater'
}
Copy the code

The import

In CommonJs, use require for module import.

Const calculator = require('./calculator.js') let sum = calculator.add(2,3)Copy the code

Note:

  1. The require module is loaded for the first time, and the module is executed first, then the content is exported
  2. Require’s module has been loaded before, and the module’s code is not executed again, instead exporting the result of the last execution.
  3. For modules that do not need to retrieve the exported content, simply use require.
  4. The require function can accept expressions and use this feature to dynamically specify the module load path.
const moduleName = ['a.js', 'b.js'];
moduleNames.forEach(name => {
    require('./'+name)
})
Copy the code

ES6 Module

The module

The ES6 Module is part of the ES syntax, which also treats each file as a Module, with each Module having its own scope.

export

Use the export command in ES6 Module to export modules. Export has two forms:

  • Named after the export
  • The default is derived

A module can have more than one named export, which is written in two different ways:

Calculator export const name = 'calculator' export const add = function(a, b){return a+b} Then export using the same export statement. const name = 'calculator' const add = function(a, b){return a+b} export {name, add}Copy the code

Unlike named exports, there can only be one default export for a module.

export default {
    name: 'calculator',
    add: function(a, b){
        return a+b
    }
}
Copy the code

The import

ES6 Modules use the import syntax to import modules.

Loads a module with a named export

There are two ways

  1. Import is followed by curly braces to enclose the name of the imported variable. And these variable names must be exactly the same as the exported variable names.
//calculator.js
const name = 'calculator'
const add = function(a, b){return a+b}
export {name, add}

//index.js
import {name, add} from './calculator.js'
add(2,3)
Copy the code
  1. Using a holistic import approach, import * as myModule allows you to add all imported variables as attribute values to myModule, reducing the impact on the current scope.
Import * as calculator from './calculator.js' console.log(calculator.add(2,3)) console.log(calculator.name)Copy the code
Load the module exported by default

Import is directly followed by the variable name, which can be specified freely

//calculator.js export default { name: 'calculator', add: Function (a, b){return a+b}} //index.js import calculator from './calculator.js' calculator.add(2,3)Copy the code
The two import methods are mixed
import React, {Component} from 'react'
Copy the code

React corresponds to the module’s default export, and Component is a variable in its named export.

CommonJS and ES6 Modules

Dynamic and static

  • CommonJS is a dynamic module structure where module dependencies are established at runtime
  • ES Modules are static Module structures whose dependencies can be analyzed at compile time.

ES6 Module has the following advantages over CommonJS:

  1. Dead code monitoring and elimination
  2. Module variables and type checking
  3. Compiler optimization

Value copying and dynamic mapping

When importing a module, CommonJs gets a copy of the exported value. In the ES6 Module, it is a dynamic mapping of values, and the mapping is read-only.

conclusion

  • CommonJS uses module. exports or exports
  • CommonJS imports using the require() function, which returns an object containing the exported variables.
  • The ES6 Module uses export exports, either named or default.
  • The export is named export followed by curly braces that contain the exported variables
  • Another way to name an export is with a variable declaration on one line.
  • The default export is Export default, and there can only be one default export
  • ES6 Module imports use import
  • Load a module with a named export followed by curly braces enclosing the name of the imported variable. And these variable names must be exactly the same as the exported variable names.
  • Using import * as as a whole, you can add all imported variables as attribute values to, reducing the impact on the current scope.
  • Load the default exported module, import directly followed by the variable name, and this name can be specified freely.