JS模块的导出和导入之export和module.export的区别

转载自 JS模块的导出和引入

在js编程中经常会有模块的导出导入，涉及到一些导入导出关键字

  • 导出关键字
    • module.exports
    • exports
    • export
    • export default
  • 导入关键字
    • require
      • const xxx = require("模块名")
    • import
      • import { xxx } from "模块名"
      • import xxx from "模块名"
      • import xxx1, {xxx2, xxx3,...} from "模块名"
      • import * from "模块名"

因为在实际开发中经常会混淆这些用法，所以想要弄清楚这些的区别，让自己明白自己到底在写什么。本文作为学习笔记输出。

模块规范

JS模块化编程分了两种规范：CommonJS模块规范和ES6模块规范。

  • CommonJS模块规范 —— CommonJS规范中，以module.exports导出接口，以require引入模块
  • ES6模块规范 —— ES6标准规范中，以export指令导出接口，以import引入模块

在Node.js编程中，Node模块系统遵循的是CommonJS规范。

CommonJS模块规范

CommonJS规范规定: 每个js文件就是一个模块，有自己的作用域。
在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
如果要暴露给其他程序，需要以module.exports导出接口，以require引入模块。

module.exports 和 exports

module.exports / exports: 只有 Node 支持的导出
模块导出的时候，导出的是module.exports，不是exports
module.exports可以导出所有的类型。对象，函数，字符串、数值等。

每一个js文件通过node执行时，都自动创建一个module变量和一个exports变量。
module变量代表当前模块。这个变量是一个对象，同时，module对象会创建一个叫exports的属性（即module.exports），该属性初始化的值是 {}，是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。

// test1.js
console.log(module)
复制代码

执行node test1.js的打印结果：

Module {
  id: '.',
  path: '/Users/xxxjuan/学习资料/Nodejs学习/demo-模块编程',
  exports: {},
  parent: null,
  filename: '/Users/xxxjuan/学习资料/Nodejs学习/demo-模块编程/test1.js',
  loaded: false,
  children: [],
  paths: [
    '/Users/xxxjuan/学习资料/Nodejs学习/demo-模块编程/node_modules',
    '/Users/xxxjuan/学习资料/Nodejs学习/node_modules',
    '/Users/xxxjuan/学习资料/node_modules',
    '/Users/xxxjuan/node_modules',
    '/Users/node_modules',
    '/node_modules'
  ]
}

// module.exports 表示模块对外输出的值。
// module.filename 模块的文件名，带有绝对路径。
// module.loaded 返回一个布尔值，表示模块是否已经完成加载。
// module.children 返回一个数组，表示该模块要用到的其他模块。
// module.parent 返回一个对象，表示调用该模块的模块。
复制代码

默认exports变量是对module.exports的引用，即exports和module.exports指向同一个内存块。 这等同在每个模块头部，有一行这样的命令。

var exports = module.exports;
复制代码
  • 当通过exports去改变内存块里内容时，module.exports的值也会改变
  • 当通过module.exports去改变内存块里内容时，exports的值也会改变
  • 当module.exports被改变的时候，exports不会被改变
  • 当exports被改变的时候，module.exports不会被改变

所以，exports属性的出现应该可以直接向exports对象添加方法，从而方便对外输出模块接口。不过当module.exports改变时，exports与module.exports也就断开了链接，所以最好不要采用这种方式，统一采用module.exports方式。

// module_export_demo.js
module.exports.a = 100
console.log("log1: " + exports.a)  // log1: 100

exports.a = 200; 
console.log("log2: " + module.exports.a)  // log2: 200

module.exports = "hello"
console.log("log3: " + JSON.stringify(exports)) // log3: {"a":200}
复制代码

module.exports可以导出所有的类型。对象，函数，字符串、数值等。 语法示例：

// module_export_demo2.js
var x = 5

var str = "hello"

var addX = function (value) {
  return value + x
};

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

// module.exports.x = x
// module.exports.str = str
// module.exports.addX = addX
// module.exports.Point = Point

module.exports = {
  x: x,
  str: str,
  addX: addX,
  Point: Point
}

// require时对比下两种方式x的值到底取哪个
exports = {
  x: 10,
}
复制代码

require

requirer用于加载模块，是node的一个全局方法，使用非常简单

const xxx = require("模块名")
复制代码

读入并执行一个JavaScript文件，返回模块的exports对象。如果没有发现指定模块，会报错。

require方法接受以下几种参数的传递：

  • 原生模块，如http、fs、path等
  • 相对路径的文件模块，如./mod或../mod
  • 绝对路径的文件模块，如 /pathtomodule/mod
  • 第三方模块，如koa等

在模块目录中通常有一个package.json文件，并且将入口文件写入main字段

    // package.json
    { "name" : "some-library",
      "main" : "./lib/some-library.js" }
复制代码

require发现参数字符串指向一个目录以后，会自动查看该目录的package.json文件，然后加载main字段指定的入口文件。
如果package.json文件没有main字段，或者根本就没有package.json文件，则会加载该目录下的index.js文件或index.node文件

因为模块导出的实际是module.exports，所以require只能看到通过 module.exports 导出的内容，看不到通过exports导出的内容。它相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数...再把require的结果赋值给某个变量。 针对上面的 module_export_domo2.js 文件，引入模块示例

// node require_demo2.js
const demo2 = require("./module_export_demo2")

console.log(demo2.x)  // 5 也证明了引入的是module.export的内容
console.log(demo2.str)  // hello
console.log(demo2.addX(15)) // 20  = 5 + 15 

let point = new demo2.Point(3, 4)
console.log(point.toString()) //  (3, 4)
复制代码

require 是运行时的，其参数可以是表达式

let value = 2
const demo2 = require("./module_export" + "_demo" + value)
复制代码

require函数加载模块

  1. require函数加载模块顺序按照其在代码中出现的顺序

  2. require函数加载模块是同步的，只有加载完成，才能执行后面的操作

  3. require函数加载的模块是被输出的值的拷贝，不会受到模块内容变化影响

     // module_export_demo3.js
 var counter = 3;
 function incCounter() {
   counter++;
 }
 module.exports = {
   counter: counter,
   incCounter: incCounter,
 };
复制代码

     const demo3 = require("./module_export_demo3")
 console.log(demo3.counter);  // 3
 demo3.incCounter();
 console.log(demo3.counter); // 3
复制代码

    counter输出结果说明module_export_demo3模块内部的变化就影响不到counter了

  4. 模块第一次被加载时会执行一次，后续被加载时不会再执行，都是从缓存中获取的

    // module_export_demo3.js
console.log("hello")
module.exports = "wrold"
复制代码

    const demo3 = require("./module_export_demo3")
const demo3_1 = require("./module_export_demo3")
const demo3_2 = require("./module_export_demo3")
const demo3_3 = require("./module_export_demo3")
const demo3_4 = require("./module_export_demo3")
const demo3_5 = require("./module_export_demo3")
console.log(demo3)
console.log(demo3_1)

// hello
// wrold
// wrold
复制代码

    hello只会被打印一次说明console.log("hello")语句只执行了一次，module_export_demo3.js只被加载了一次。

ES6模块规范

ES6发布的module并没有直接采用CommonJS，甚至连require都没有采用，也就是说require仍然只是node的一个私有的全局方法，module.exports也只是node私有的一个全局变量属性，跟标准什么关系都没有。
ES6模块规范是，在创建JS模块时，export 语句用于从模块中导出函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。

export 和 export default

ES6模块导出有两种方式：export(命名导出) 和 export default(默认导出)。 在导出多个值时，命名导出非常有用。在导入时，必须使用相应对象的相同名称。但是，可以使用任何名称导入默认导出。

export语法介绍

// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 导出"引入模块的导出值"
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export * from …; // 导出"引入模块的所有导出值"，不包括模块的默认导出值
export { default } from …; // 导出"引入模块的默认导出值"
复制代码
  • export与export default均可用于导出常量、函数、文件、模块等
  • 通过export方式导出，在导入时要加{ }，export default则不需要
  • 在一个文件中，export可以有多个，export default仅有一个
  • 大部分风格建议，模块中最好在末尾用一个export导出所有的接口
export 1 // 这种写法错误

// 正确的写法
const value = 1
export { value }

// 或者
export const value = 1

// 或者
const value = 1
export default value

// 或者
export default 1
复制代码

export default是别名的语法糖，这个语法糖的好处在是

  • import的时候，可以省去花括号{}。
  • import的时候, 可以起任何变量名表示引入变量

所以如果import的时候，你发现某个变量没有花括号括起来（除了* 号），是因为该变量是通过export default 导出的。

// d.js
// 导出函数
export default function() {}

// 等效于：
// function a() {};
// export {a as default};

复制代码

import a from "d.js" // a 是 {defalut as a}的替代写法。
复制代码

所以使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

// a.js
let sex = "boy";
export default sex //sex不能加大括号 等价于 export {sex as default}
复制代码

本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。 自然default只能有一个值，所以一个文件内不能有多个export default。

// b.js
import any from "./a.js"
import any12 from "./a.js" 
console.log(any, any12)   // boy,boy
复制代码

import

require 和 import是完全不同的两种概念。require是赋值过程，import是解构过程 const xxx = require("模块名") import { xxx } from "模块名"

  • import是编译时的, 必须放在文件开头，否则会报错
  • import后面跟上花括号的形式是最基本的用法，花括号里面的变量与export后面的变量一一对应。
import {a} from ..
复制代码
  • 支持给变量取别名。因为有的时候不同的两个模块可能有相同的接口，可以给这个变量取一个别名，方便在当前的文件里面使用。
import {a as a_a} from ..
复制代码

import介绍语法

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import("module-name"); // 动态模块加载，返回的是一个promise对象
复制代码

Node为何支持export / import

我们经常会看到在node中也会用export / import，这是什么呢？ 我们在node中使用babel支持ES6，仅仅是将ES6转码为ES5再执行，import语法会被转码为require。因为目前所有的引擎都还没有实现export / import。
如何让Node.js支持ES6的语法具体参考在node环境中支持ES6代码

// ES6语法
import {a} from "./demo.js"
// 转码ES5后
var _demo = require("./demo.js")
复制代码

这也是为什么在使用module.exports模块导出时，在引入模块时使用import仍然起效，因为本质上，import会被转码为require去执行。

总结

CommonJS规范中，建议尽量都用 module.exports 导出，然后用require导入 ES6规则中，大部分风格建议，模块中最好在末尾用一个export导出所有的接口

  • module.exports / exports: 只有 Node 支持的导出
  • require: Node 和 ES6 都支持的引入
  • export / import : 只有ES6 支持的导出引入
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342