之前使用react开发项目接触到了import,export和export default,对模块的导入导出有了初步的认识。最近接触gulp,使用了require,exports和module.exports,结果瞬间陷入迷茫,更确切的说是混乱,查阅资料之后整理出这篇文章对文件导入导出的一个简单总结,希望对这些知识点有一个清晰正确的认识
node中的文件导入与导出(require,exports,moudule.exports)
node是commonJS的主要实践者,node中提供了模块的导入与导出方式便是:require,exports和module.exports
1、exports,module.exports导出模块
node提供了两种导出模块的方式,exports是module.exports的引用,可以理解成const exports=module.exports,但是module.exports的优先级要高于exports,如果两者同时出现导出的是module.exports模块
module.exports = {name:'liuhao'}
exports = {age:18}
那么导入的文件中将引入{name:'liuhao'}
const me = require('./index')
console.log(me) //{name:'liuhao'}
exports和module.exports默认是一个空对象,可以对这个对象进行赋值
exports.name = 'liuhao'
exports.age = 18
module.exports.sex = 'male'
module.exports = {
info:'帅爆了'
}
上面的代码中,模块先导出了name、age和sex,但是module.exports会将前面三个赋值覆盖掉,最后这个模块导出的是包含info属性的对象
2、require用于导入模块
导出的模块是为了在其他模块中导入,方便其他模块使用,导入的方式有两种:多项导入和单项导入
const { src,dest } = require('gulp');
const { src } = require('gulp');
const src = require('gulp');
多项导入:模块中导出多项内容,引入时使用const {src,dest}=require('gulp')导入,我的理解这点运用了ES6的解构赋值,gulp导出一个对象,对象中含有src和dest属性,所以通过上面的方法可以将src和dest模块导入进来
单项导入:导入一个内容时,可以用两种方式
- 一种是类似与多项导入的方式,
- 另一种是不用解构赋值的方式直接引入,
上面代码中第二行就是解构赋值的方式引入,第三行就是直接引入,只要名字与gulp中的属性名对应上就能成功引入
ES6中的文件导入与导出(import,export,export default)
ES6中提供的导出方式与node中不同,es6中的方式是import,export,export default。
1、export,export default
export导出的模块会添加到一个对象中
export Component
export Fragment
export default react
export和export default可以同时存在,一个文件中可以导出多个内容,export导出的内容会添加到一个对象中,export default是默认导出,两者都可以导出模块,只是在引用的时候会有差异
2、import导入
在文件中导入模块,es6提供的方式是import
import React from 'react'
import {Component,Fragment} from 'react'
import React,{Component,Fragment} from 'react'
导入是就能看出export和export default的区别了,export导出的模块需要用解构赋值的方式导入而且名字要对相应上,但是export default导出的模块则不能用结构赋值的方式导入而且模块名称不需要对应上
以上是我对模块导入导出的理解,不够全面也可能会有误解,希望大家补充和指出错误








网友评论