Introduction and export of commonJS and es6 specifications

This time I will bring you the introduction and export of commonJS and es6 specifications. What are the precautions for the introduction and export of commonJS and es6 specifications. The following is a practical case, let's take a look.

Definition in index.js:

var info = { name = 'sisi' };

1.When defining variables, do not use objectvariable name, as unknown errors may occur. .

2. When using export {info} for output, the import must be in the form of import {info} from index.js, and the curly brackets cannot be omitted.

3. When the output is in the form of export{info as vm}, the info interface can no longer be used for import, and only the vm interface can be used, that is,

import {vm} from index.js

4. Key points: The output uses module.exports = info When introducing info, you can also use import.

import info from index.js

cannot be used

import {info} from index.js

Of course, in this case, use require ;Also correct

var info = require('index.js');

5. Compare with the fourth item above, if the output uses es6 export. That is, export {info}; or export default info; then the module must use import to introduce info, and require will not work.

6. When using export output, the import must have {}, for example, demo.js

export const str = 'sisi';
export function func(){
   console.log('sisi');
}

must be imported with:

import {str} from 'demo'; 或 import {str, func} from 'demo';

cannot be used

export default const str = 'sisi';

But when using

export default const str = 'sisi';

to import, you can use

import str from 'demo';

because there can only be one export default

es6 {
　　export   :      '可以输出多个，输出方式为 {}' ，
　　export  default : ' 只能输出一个 ，可以与export 同时输出，但是不建议这么做'，
　　解析阶段确定对外输出的接口，解析阶段生成接口，
　　模块不是对象，加载的不是对象，
　　可以单独加载其中的某个接口（方法），
　　静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变，
　　this 指向undefined
}
commonJS {
　　module.exports =  ...   :      '只能输出一个，且后面的会覆盖上面的' ，
　　exports. ...  : ' 可以输出多个'，
　　运行阶段确定接口，运行时才会加载模块，
　　模块是对象，加载的是该对象，
　　加载的是整个模块，即将所有的接口全部加载进来，
　　输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，
　　this 指向当前模块
}

in a file or module. I believe I read the case in this article. You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Entry, output, module analysis of webpack3.x

##Vue2 tab switching method

The above is the detailed content of Introduction and export of commonJS and es6 specifications. For more information, please follow other related articles on the PHP Chinese website!