When the front-end application becomes more and more complex, we want to divide the code into different modules for easy reuse and on-demand loading.

Require and import are statements that introduce modules under different modularization specifications. The differences between the two methods will be introduced below.

1. The time and place of appearance are different

2. Require/exports is dynamically loaded at runtime, and import/export is statically compiled

What CommonJS loads is an object (the module.exports property), which will only be generated after the script is run. The ES6 module is not an object, and its external interface is just a static definition, which will be generated during the static code analysis phase. -Ruan Yifeng

3. The output of require/exports is a copy of the value, and the output of the import/export module is a reference of the value

If two files reference a module at the same time, when the value in the module is changed, the value in the module imported by require will not change, but the value in the module imported by import will change.

4. Inconsistent usage

Usage of require/exports:

const fs = require('fs')
exports.fs = fs
module.exports = fs

The wording of import/export:
import fs from ‘fs’

import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

5. Restrictions on the use of different terminals (client/server)

6. Alternatives

CommonJS modular scheme require/exports is designed for server-side development. Server module systemSynchronizeRead the content of the module file and get the module interface after compiling and executing. (Node.js is the implementation of the CommonJS specification).

On the browser side, because itsasynchronousThe feature of loading script file, CommonJS specification cannot be loaded normally. So there is a modular scheme designed by RequireJS and SeaJS (CommonJS compatible) for browsers.

Each of the two schemes has its own limitations, the following points need to be noted:

• Native browsers do not support require/imports. You can use packaging tools such as Browsersify and webpack that support CommonJS module specifications to package code.
• Import/export cannot be used directly in the browser, we need to add the type="module attribute to the <script> element of the imported module.
• Even though Node.js 13.2+ already supports import/export, Node.js officially does not recommend using it in a formal environment. It can be used currentlybabel Compile the ES6 module system into the CommonJS specification (note: the syntax is the same, but the specific implementation is still require/exports).

7. Reference

• Ruan Yifeng-Introduction to ECMAScript 6

• Cunzhi-knowing the answer-require, import difference
• From CommonJS to Sea.js
• sunshine-front-end modularity (AMD, CommonJS, UMD) summary
• Oak Tree-JavaScript Modularization Summary
• Zhang Xinxu-Hurray, the browser natively supports ES6 export and import modules!