Hello everyone, MY name is Xiaobai. This article is the first question of the front confusion point. It takes about 3 minutes to read the full text.

I think everyone has done a lot of projects and knocked a lot of code in their daily work, but sometimes many basic knowledge points are very vague, or in a state of confusion and confusion, including me of course.

Now the cycle of a project is very short, to borrow a phrase from our boss (probably not seen) : most customers don’t know what they want, you have to hurry up (I want to see it on Friday, no problem) to give him experience, he can know what he should want. So to catch up, most of the work is CTRL + C + CTRL + V. So that a lot of basic knowledge will be forgotten or even ignored, but often the problem is because of these small details.

So I want to write a “confusion series”, in the process of my own learning, the front-end development process is easy to confuse, or easy to remember some knowledge points sorted out and shared to everyone, you can leave a message in the comment section of their confused knowledge points, progress together to learn.

So let’s start with the first question:

Module. Exports, exports, exportWhat’s the difference?

These three things are really a distinction between two concepts: Let’s start with a table:

The name of the specification Derived keywords Import keywords Renaming variables Collective export
commonjs module.exports / exports require {A, B} Does not support
esm export import as * as xxx

It’s actually pretty clear that different specifications use different keywords and features, and we use those keywords to distinguish the context in which we’re writing code.

  • Nodejs (webpack, Babel) ->commonjs,
  • Browser (vue script tag or HTML script tag with type=”module”) -> ESM.
  1. The module exports, exportsIt’s a gang. They’re all based oncommonjsFrom the norm.
  2. exportIs based ones6Esm (ECMA Script Modules) from norms.

Commonjs specification:

The CommonJS specification is a form of module defined to solve JavaScript’s scoping problems, allowing each module to be executed in its own namespace. The main content of the specification is that modules must export external variables or interfaces through module.exports and import the output of other modules into the current module scope through require().

Example:

// moduleA.js
module.exports.double = function( value ){
    return value * 2;
}

Copy the code
// moduleB.js
var { double } = require('./moduleA');
var res = double(4);
console.log(res) //8
Copy the code

Module. exports can be abbreviated as exports for convenience in some cases. Exports was originally a reference to module.exports.

module.exports===exports //true
Copy the code

So modulea.js above, you can omit the module like this

// moduleA.js
exports.double = function (value) {
    return value * 2;
}
Copy the code
// moduleB.js
var { double } = require('./moduleA');
var res = double(4);
console.log(res) / / 8
Copy the code

Module. Exports cannot be omitted when an assignment statement follows it. Why? Let’s move on

Module. exports = exports we can say that at the beginning of the file we have code like this:

module.exports = {};// Start with an empty object
let exports = module.exports;
console.log(module.exports===exports)//true
Copy the code

So adding any new properties to the exports object {} is like adding properties to module.exports because we know node objects are reference types.

Such as:

exports.double = function (value) {
    return value * 2;
}

exports.PAI = 3.1415926535897932384626 //233, I can recite so many ~
exports.add = function (a, b) {
    return a + b;
}
Copy the code

Dangerous! Exports does not work

module.exports = {};// Start with an empty object
let exports = module.exports;

// Assigning exports breaks the link with module.exports

// Don't do that ~!
exports = {
    name: 'zhangsan'
}
// Don't do this ~!
exports = function name(a) {}
// Don't do this ~!
exports = 3.1415926535897932384626
console.log(module.exports); // Print: {} returns to the initial {} value
console.log(exports);  // Print: 3.1415926535897932384626

console.log(module.exports === exports); // False If you go out of your way, I will go out of my way
 
Copy the code

To export using assignment, you can export an object like this:


// moduleA.js
module.exports = {
    name:'The Outlaw John.'.age:'the'.wife:Little Red next door
}

// moduleB.js
let { name, wife } = require('./moduleA');
console.log(name,age) // The outlaw fanatic Zhang SAN is next door xiao Hong
Copy the code

Module. exports is guaranteed to get the value.

How to rename

Commonjs to rename exported variables with the (:) symbol:

let{name, wife: girlfriend} =require('./moduleA');

Copy the code

Esm (ECMA Script Modules) specification

Now for the ES6 Module specification we are familiar with from writing vue or React projects.

Esm is a standard for breaking uP javascript programs into separate modules that can be imported on demand. Unlike WebPack and Babel, ESM is a standard feature of javascript and has been implemented on the browser side and in NodeJS. The advantage of using ESM is that the browser can optimally load modules more efficiently than using libraries. Import and export module variables through import and export syntax

Commonjs uses require and modelue.exports to implement module import and export, esM uses import and export to import and export.

Esm export: let, var, const, function, class, etc.

var person = {
    name: 'White cat'.text: a,
}
export {
    person,
}
export function showAge() {
    console.log(person.age);
}
export let city = 'chengdu'
export const PAI = '3.141592653'
Copy the code

Note: The export command specifies the external interface and must establish a one-to-one correspondence with variables inside the module.

// error 1 export 3.14; // error 2 var API = 3.14; export api;Copy the code

Both are wrong because export is directly followed by a specific value, which cannot be obtained externally by a specific identifier (variable).

Export default Export by default

One step ahead of the CommonJS specification is that ESM provides a default export method. Export default can be directly followed by variables, specific values, function, and calss.

/ / right
let a = 'Joe';

export default a
/ / right
export default 3.14

export default function (a) {
    return a * a
}
/ / right
let sum = function (a, b) {
    return a + b
}
export default sum
/ / right
function calc(a, b) {
    return a + b
}
export default calc
Copy the code

How to rename

The ESM provides the AS keyword to rename exported variables to prevent variable names from repeating.

import { wife as girlfrend } from "./moduleA.js";
Copy the code

To export all methods or variables as a specified variable, use import * as mod from “XXXX”

import * as tool from "./moduleA.js";
console.log(tool.API) / / 3.141592
Copy the code

The ESM module specification specifies that setting type=’module’ in the HTML script tag can write ESM module code, including the import function:

<script type="module">
    import { name,wife } from "./es6/moduleA.js"
    console.log(name,wife); // The outlaw fanatic Zhang Sanxiaohong
    / /... Other code
</script>
Copy the code

The above.

Space is limited and there is much left out, but enough to distinguish between the two.

What should I write next? Welcome to comment or point out mistakes ~, thank you!

Ken, please don’t forget to give me a thumbs-up, comments, favorites.

Past highlights:

1. [Bao Zhen] My first Webpack optimization, the first screen rendering from 9s to 1s

2. What is an iterator? What does Generator have to do with it