requirewithimportDifference

origin

Before the birth of es6, js has no module system, even css has@importIt is undoubtedly a hindrance to the development of complex large-scale projects. Es6 was officially released in June 2015, so es6 also has a separate name es2015. Before the official did not propose es6, the community gave a solution to the module problem, that is node.js. Introduced to this place, in factrequirewithimportThe origins have emerged, the keywords used in the module solution in es6 areimportAnd the keyword used by the solution provided by node.js isrequire。

Node.js was released by Ryan Dahl in 2009. The modularity provided by node.js is also called CommonJS, but node.js is mainly used for server-side development, but with the development of the times, some front-end frameworks now rely on node.js.

Export command / import command

Want to userequireorimportFirst of all, we must know how to use the two methods of exporting. From now on, the following two solutions are distinguished by CommonJS and es6.

CommonJS

• Export variables, methods, objects

// testcommonjs.js
exports.a = 123;
exports.b = 'hello';
exports.c = function(){
  console.log('ccc')
}
exports.d = {
  foo: 'bar'
}

//Equivalent => 
module.exports.a = 123;
module.exports.b = 'hello';

//Equivalent => 
module.exports = {
  a:123,
  b:'hello',
  c:function(){
    console.log('ccc')
  },
  d:{
    foo：bar
  }
}

It is recommended to use module.exports, using exports alone will produce unexpected errors in some cases, which is not the focus of this article.

• Introduction and use

//index.js
var test = require('./testcommonjs')
console.log(test.a)
console.log(test.b)
test.c()
console.log(test.d.foo)

es6

• Export variables, methods, objects (only some commonly used methods are listed here, please refer to the specific usage methods)Getting started with es6）

//testesmodule.js
export var a = 123
export var b = 'hello'
export function c(){
  console.log('ccc')
}
export var d = {
  foo: 'bar'
}

• Introduction and use

import { a,b,c,d } from './testesmodule'

console.log(a)
console.log(b)
c()
console.log(d.foo)

//Equivalent => 
import * as test form './testesmodule'
console.log(test.a)
console.log(test.b)
test.c()
console.log(test.d.foo)

Static optimization

This is a concept learned from the document of the great god of Yiyi. He uses the core module of node in the document.fsGive an example

• es6

// ES6 module
import { stat, exists, readFile } from 'fs';

Note: Do not try without configurationbabelIn the project to test the above code, because node still does not support the modular syntax of es6 (the current node version of the author: v10.15.0), although it has implemented most of the es6 features.

• CommonJS

// CommonJS module
let { stat, exists, readFile } = require('fs');

It looks like this,fsThe way the module is introduced seems to be only a syntactic difference between es6 and CommonJS, but in fact, the above code is handled in CommonJS like this.

let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

In other words, in order to usefsmiddlestat、exists、readFileMethod, in code execution makes it necessary to putfsThe entire module is loaded in, generating an object_fsAnd then read three methods from this object, this kind of loading is called "runtime loading", because only the runtime can get this object.

The design of the es6 module is as static as possible, so that the dependencies of the module and the variables of the input and output can be determined at compile time. From this point of view, the modular efficiency of es6 is much higher than that of CommonJS. also listed some other advantages of static loading in the document, but this dish b can not read ╮(╯▽╰)╭

New thinking：fsIs the core module of node.js, why the modular syntax of es6 can take effect, through file positioning in ws, found that the core module code of node.js is written with ts, but because of the ts syntax is not familiar, can not understand How ts can be compatible with both CommonJS and es6.