前言
首先要承认自己又偷懒了,这次又没按时更新。主要原因还是懒,不过一定要努力学习啊。回到正题,目前正在学习react,在做项目的时候,对require,import有些晕了,搞不清楚,所以今天就研究一下。
import require区别
node的重要思想之一就是模块化,node遵循CommonJs规范。而在ES6出现之前,都是import/export来实现node模块化的加载。ES6出现之后,由于ES6发布的module并没有直接采用CommonJS,甚至连require都没有采用,所以require仍然只是node的一个私有的全局方法,module.exports也只是node私有的一个全局变量属性。
babel项目出现后,babel 将还未被宿主环境(各浏览器、Node.js)直接支持的 ES6 Module 编译为 ES5 的 CommonJS —— 也就是 require/exports 这种写法 。所以说目前你编写的 import/export 最终都是编译require/exports 来执行的。
import和require还有一些小的差别
1.调用时间
- require是运行时调用,所以require理论上可以运用在代码的任何地方
- import是编译时调用,所以必须放在文件开头
2.形式不一样
-
require/exports 的用法只有以下三种简单的写法:
const fs = require('fs') exports.fs = fs module.exports = fs
-
import/export 的写法就多种多样:
import fs from 'fs' import {default as fs} from 'fs' import * as fs from 'fs' import {readFile} from 'fs' import {readFile as read} from 'fs' import fs, {readFile} from 'fs' export default fs export const fs export function readFile export {readFile, read} export * from 'fs'
导出模块
-
首先是一个基本问题
module.exports和exports是属于CommonJS模块规范!
export和export default是属于ES6语法 -
module.exports和exports的区别与联系
node采用的是CommonJs规范,根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。
代码:
var x = 5; var addX = function (value) { return value + x; }; module.exports.x = x; module.exports.addX = addX;
上面代码通过module.exports输出变量x和函数addX
var example = require('./example.js'); console.log(example.x); // 5 console.log(example.addX(1)); // 6
exports变量是指向module.exports,加载模块实际是加载该模块的module.exports。这等同在每个模块头部,有一行这样的命令。
var exports = module.exports;
于是我们可以直接在 exports 对象上添加方法,表示对外输出的接口,如同在module.exports上添加一样。注意,不能直接将exports变量指向一个值,因为这样等于切断了exports与module.exports的联系。
-
export和export default的区别与联系
模块功能主要由:export和import构成。export导出模块的对外接口,import命令导入其他模块暴露的接口。
export其实和export default就是写法上面有点差别,一个是导出一个个单独接口,一个是默认导出一个整体接口。使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。这里就有一个简单写法不用去知道有哪些具体的暴露接口名,就用export default命令,为模块指定默认输出。
代码:
export://demo1.js export const str = 'hello world' export function f(a){ return a+1 }
导入:
//demo2.js import { str, f } from 'demo1' //也可以分开写两次,导入的时候带花括号
export default:
//demo1.js export default const str = 'hello world'
导出:
//demo2.js import str from 'demo1' //导入的时候没有花括号
最后
这几天有点松懈,没有按时完成计划,所以决定在多写一篇博客。另外此文有不足之处还请大家多多评论交流,作者小白,请大家包容。
本文引用了多篇网上博客,如有侵权,请私信或评论。
https://www.cnblogs.com/Nutrient-rich/p/7047877.html
https://segmentfault.com/a/1190000010472916