Detailed explanation of the differences and connections between export default, require and exports, and export

Are you still worried about the differences and connections between module.exports, exports, export and export default, import and require? This article is basically enough!

1. First, let’s figure out a basic question:

module.exports and exports belong to the CommonJS module specification! (Not sure about commonjs? Master, please take a look at the commonjs specifications here)

export and export default belong to ES6 syntax (Not sure about ES6? Master, please take a look at the ES6 module here) !

Similarly import and require belong to ES6 and CommonJS respectively!

2. Now that you know which part of the syntax it belongs to, there is another clear point:

module.exports and exports, export and export default are allExport module;

##import and require are import modules.

#So don’t get confused now, module.exports export corresponds to require import, and export export corresponds to import import.

Hello! Wait, why do we say that module.exports export corresponds to require import, and export export corresponds to import import? Then there are exports and export default! ? Then let's continue.

3. The difference and connection between module.exports and exports

At this point, I have to mention modularity a little bit:

Node applications are composed of modules and adopt the CommonJS module specification.

According to this specification, each file is a module and has its own scope. Variables, functions, and classes defined in a file are private and not visible to other files.

CommonJS specification stipulates that inside each module, the

module variable represents the current module. This variable is an object, and its exports attribute (that is, module.exports) is the external interface. Loading a module actually loads the module.exports attribute of the module.

var x = 5;var addX = function (value) {  return value + x;};module.exports.x = x;module.exports.addX = addX;

The above code outputs the variable

x and function addX through module.exports.

require method is used to load modules.

var example = require('./example.js');console.log(example.x); // 5console.log(example.addX(1)); // 6

After reading the introduction to the commonjs specification just now, you can know the following differences and connections:

In fact, the exports variable points to module.exports, and loading the module actually loads

module.exports of this module. This is equivalent to having a line like this at the head of each module.

var exports = module.exports;

So we can add methods directly to the exports object to represent the external output interface, just like adding it to module.exports. Note that you cannot directly point the exports variable to a value, because this is equivalent to cutting off the connection between exports and module.exports.

3. The difference and connection between export and export default

The module functions are mainly composed of:

export and import constitutes . exportExport the external interface of the module, and the import command imports the interfaces exposed by other modules.

Export is actually a little different from export default in the way they are written. One is to export individual interfaces, and the other is to export an entire interface by default. When using the

import command, the user needs to know the variable name or function name to be loaded, otherwise it cannot be loaded. Here is a simple way to write it without knowing the specific exposed interface names. Just use the export default command to specify the default output for the module.

export can be written like this

<code class=" language-javascript"><span class="token comment">// testA.js<span class="token keyword">var f <span class="token operator">= <span class="token string">&#39;Miel&#39;<span class="token punctuation">;<span class="token keyword">var name <span class="token operator">= <span class="token string">&#39;Jack&#39;<span class="token punctuation">;<span class="token keyword">var data<span class="token operator">= <span class="token number">1988<span class="token punctuation">;

export <span class="token punctuation">{f<span class="token punctuation">, name<span class="token punctuation">, data<span class="token punctuation">}<span class="token punctuation">;<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

After using the

export command to define the external interface of the module, other JS files can load this through the import command module.

<code class=" language-javascript"><span class="token comment">// main.js
import <span class="token punctuation">{</span></span></code><code class=" language-javascript"><span class="token comment"><span class="token keyword"><span class="token operator"><span class="token string"><span class="token punctuation"><span class="token keyword"><span class="token operator"><span class="token string"><span class="token punctuation"><span class="token keyword"><span class="token operator"><span class="token number"><span class="token punctuation"><span class="token punctuation">f<span class="token punctuation">, name<span class="token punctuation">, data</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><code class=" language-javascript"><span class="token comment"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation">} from <span class="token string">&#39;./testA&#39;<span class="token punctuation">;<br/></span></span></span></span></span></span></span></code>

export default can be written like this

<code class=" language-javascript"><span class="token comment">// export-default.js
export default <span class="token keyword">function <span class="token punctuation">(<span class="token punctuation">) <span class="token punctuation">{
  console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(<span class="token string">&#39;foo&#39;<span class="token punctuation">)<span class="token punctuation">;<span class="token punctuation">}<br/></span></span></span></span></span></span></span></span></span></span></span></span></code>

// 或者写成function foo() {
  console.log('foo');}
export default foo;

<code class=" language-javascript"><span class="token comment">// import-default.js
import customName from <span class="token string">&#39;./export-default&#39;<span class="token punctuation">;<span class="token function">customName<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;<span class="token comment"> // &#39;foo&#39;<br/><br/></span></span></span></span></span></span></span></span></code>

The following compares the export default and export output.

You can see that the first group is used, the statement does not need to use braces; the second group is used, the corresponding statement needs to use braces, a module can only have one default output, so it can only be used once.

4. The difference and connection between import and require<strong></strong><strong></strong>

It’s already clear after reading the above. import and require are just two syntaxes for importing modules that belong to ES6 and CommonJS respectively.

The above is the detailed content of Detailed explanation of the differences and connections between export default, require and exports, and export. For more information, please follow other related articles on the PHP Chinese website!