export,export default,module.exports,import,require之间的区别和关联

更新日期: 2019-07-18阅读: 2.2k标签: 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 Steve
额外说明:对于自定义的模块,需要使用相对路径,否则会提示找不到模块/组件(默认情况下,非相对路径的引用,会从node_modules文件夹中查找)  

exports 与 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

export 和export default 均可用于导出(常量 | 函数 | 文件 | 模块)等。可以在其他文件中通过 import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够进行使用。在一个文件或者模块中,export、import 可以有多个,但 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};
对于命名方式导出的,在导入的时候必须使用相应对象的相同名称
引用的时候:import {utils,name as myName} from './utils.js';
通过 export 方式导出,在导入时要用花括号{ };而通过 export default 方式导出的,则不需要:
如通过 export default 导出
export default utils;
则在使用的时候不用加花括号,且导入时的名字可以自定义,如:
import myUtils from './utils.js'; 对于默认方式导出的,则导入的时候,名称可以随便取
默认导出:不能使用 let,var 或 const 作为默认导出

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;

链接: https://fly63.com/article/detial/4785

JS 中的require 和 import 区别

require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。

vue中的js引入图片,必须require进来

需求:如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径,2.利用数组保存再循环输出

关于require.context的尝试

为什么会突然用到webpack这个管理特性呢?项目某个页面需要引入N张demo图片。即资源的批量引入:如果要引入10+个以上的图片资源,就需要写10+个如下的引入代码:import XXX from ;,那如果再多一点的静态资源需要引入呢?这时候require.context就派上了用场。

require.js的使用

RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范,模块与模块之间可以互相依赖,当然可能会有人会想,模块之间的依赖

require,exports和module.exports的区别

require 的运行机制和缓存策略你了解吗?require 加载模块的是同步还是异步?谈谈你的理解exports 和 module.exports 的区别是什么?require 加载模块的时候加载的究竟是什么?

js中require和import的区别

当前端应用越来越复杂时,我们想要将代码分割成不同的模块,便于复用、按需加载等。require 和 import 分别是不同模块化规范下引入模块的语句,下文将介绍这两种方式的不同之处。

require后面不加default会报错

在项目中用 require(./Download.vue) 引入一个组件的时缺少.default 会报错:Failed to mount component: template or render function not defined

用了这么久的 require,你真的懂它的原理吗?

我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行javascript,有了node的出现

如何为 Node.js 的 Require 函数添加钩子?

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。早期的 Node.js 采用的是 CommonJS 模块规范,从 Node v13.2.0 版本开始正式支持 ES Modules 特性

require加载器实现原理

人们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下会在浏览器中去运行javascript,有了node的出现,可以在node中去运行javascript

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!