Javascript (es2016) import and require usage and difference

Write a simple js file, assuming the name is: lib.js . The assumptions are as follows:


export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

This way you can reference the properties and methods defined in lib in other places. There are two ways to reference them, namely import and require.


//method one
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));
//method
import * as lib from 'lib';
square = lib.square;

You can also set the default export information, you need to define export default {} in lib.js. Default can be followed by a parameter, or an array. The writing method is:


//------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

Usually used to the first one. Then use import to get the array or parameter. But import can only be used for static import, it must be written at the top of the file at the beginning of the file. And require can achieve dynamic loading.
[table]
|Loading Method|Specification|Command|Features|
|Runtime Loading|CommonJS/AMD| require | Community Program, which provides a server/browser module loading scenario. Non-verbal level standards. Module dependencies and input/output variables can only be determined at runtime and cannot be statically optimized. |
|Compile-time loading|ESMAScript6+| import | Language specification level support module functionality. Support compile-time static analysis, which is convenient for JS to introduce macro and type checking. Dynamic binding. |
[/table]


const incrementCounter = function ({dispatch,state}){
    dispatch(‘INCREMENT‘)
}
export default {
    incrementCounter
}
//require
let myAction = require(‘xxxxx‘);
myAction.default.incrementCounter()

Intelligent Recommendation

The difference between import and require the

Before es6 js has not its own grammar module, in order to solve this embarrassing there is the emergence of require.js. After es6 js release and the introduction of import of the concept makes clear d...

require and import difference in JS

Both are aimed at JS modular programming. Follow the norms requireAMD is introducing standardized way importThe syntax is a standard es6, if you want a compatible browser then be converted into the sy...

The difference between require and import of

Follow the norms -require AMD is introducing standardized way -import is a standard grammar es6, if you want a compatible browser then be converted into the syntax es5 Call time -require is to ...

import and require the use of difference

Herein refers to the use of the JS, although other languages also introduced (e.g., Python) First of all: is the difference between the two: import ES6 is utilized modular, and used And the require,...

Import and Require difference

Follow the specification Require is an AMD specification introduction method Import is a grammar standard for ES6. If you want to compatibility with the browser, you must convert to ES5 syntax. Call t...