export,export default,module.exports,import,require之间的区别和关联
module.exports
Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在这些文件里面定义的变量、函数、类,都是私有的,对外不可见,因此规避掉了作用域污染。
根据CommonJS规定,每个模块内部,module变量代表当前模块,这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实就是加载该模块的exports属性。
举例:通过module.exports输出变量 age 和 sayHelloTo 函数。
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
module.exports.age = age;
module.exports.sayHelloTo=sayHelloTo;require:用于加载模块
var temp = require('./MyModule.js'); //这里也可以使用 import myModule from './MyModule.js'
console.log(temp.age); // 7
console.log(temp.sayHelloTo("Steve")); // hello Steveexports 与 module.exports
为了方便,node为每个模块提供了一个exports变量,指向module.exports。这等同于在每个模块头部,有这么一行代码:
var exports = module.exports;因此,我们可以直接在exports对象上添加方法(等同于在 module.exports 添加一样)
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
exports.age = age; //等效于: module.exports.age = age;
exports.sayHelloTo=sayHelloTo; //等效于: module.exports.sayHelloTo=sayHelloTo;P.S.不能直接将exports指向一个值,这会切断 exports 与 module.exports 的联系(但是可以用module.exports来指向一个值)
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
exports = age; //不要这么干。这么做会切断exports与module.exports的联系不同于CommonJS,ES6使用 export 和 import 来导入、导出模块
用 export 导出的模块,需要用 import 来进行导入,而不能用 require。
P.S.:export 命令规定的是对外的接口,必须与模块内部的变量建立一一对应的关系
const utils = {
showSth : function(){
console.log("showSth");
},
saySth : function(){
console.log("saySth");
}
}
//导出的3种方式
export var m = utils; // 方式1,这种方式在引用的时候需要这样: import {m} from './utils.js';
export {utils}; // 方式2,用大括号来导出变量,如果导出的变量有多个,则{变量1,变量2,变量3...,变量N}。这种方式在引用的时候需要这样: import {utils} from './utils.js';
export {utils as myUtils}; // 方式3,这种方式在引用的时候需要这样: import {myUtils} from './utils.js';
在引用的地方,也可以直接指定别名,如:import {myUtils as utils} from './utils.js';MDN对于export和import的语法说明:
export语法:
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;import语法:
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import(module-name);export 和 export default
```javascript
const utils = {
showSth : function(){
console.log("showSth");
},
saySth : function(){
console.log("saySth");
}
}
const name = "my name is Artech";
export {name}; //命名导出
export {utils};export default utils;import myUtils from './utils.js'; 对于默认方式导出的,则导入的时候,名称可以随便取import *
将一个js文件中定义的方法,模块,对象等,全部导出,一般结合别名使用,如:
myModule.js
export const fun1 = ()=>{}
export const objInfo = {...};使用:
demo.js:引用myModule.JS
import * as myAlias from './myModule';
//fun1()和objInfo都是定义在myModule中的方法和对象
myAlias.fun1();
myAlias.objInfo;本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!