美文网首页
import/export与requre/exports的区别

import/export与requre/exports的区别

作者: lemonzoey | 来源:发表于2018-02-27 16:27 被阅读0次

import/export是Es6中的规范,最后都会转换为require/exports

一 遵循的模块化规范不一样

模块化规范:即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScript 是那么的裸奔呢——全局变量就是它的模块化规范。

二 出现的时间不同

require/exports 2010 年前后出生。 2014 年 Webpack 还是新玩意,现在已经是前端必备神器了。Browsersify、Webpack 一开始的目的就是打包 CommonJS 模块。 CommonJS 作为 Node.js 的规范,一直沿用至今。由于 npm 上 CommonJS 的类库众多,以及 CommonJS 和 ES6 之间的差异,Node.js 无法直接兼容 ES6。所以现阶段 require/exports 任然是必要且实必须的。
import/export 出自ES6,基本在2015年后才被大家熟知。
这也就是为什么前面说 require/exports 是必要且必须的。因为事实是,目前你编写的 import/export 最终都是编译为 require/exports 来执行的。require/exports 和 import/export 形式

三 加载机制不同

1.require

// CommonJS模块
let { stat, exists, readFile } = require('fs');
// 等同于
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

require这种加载称为“运行时加载”,因为只有运行时才能得到这个对象,导致完全没办法在编译时做“静态优化”。

2.import

// ES6模块
import { stat, exists, readFile } from 'fs';

上面代码的实质是从fs模块加载 3 个方法,其他方法不加载
import 种加载称为“编译时加载”或者静态加载,即 ES6 可以在编译时就完成模块加载,效率要比 CommonJS 模块的加载方式高。当然,这也导致了没法引用 ES6 模块本身,因为它不是对象。

require/exports 的用法只有以下三种简单的写法:

const fs = require('fs')
exports.fs = fs
module.exports = fs

1.每一个node.js执行文件,都自动创建一个module对象,同时,module对象会创建一个叫exports的属性,初始化的值是 {}。
2.exports是module.exports的引用。module.exports默认初始值为{}时
3.require()始终导出的是module.exports的值。
4.exports与module.exports指向同一块内存,所以给exports.xxx赋值,实际上是导致module.exports不再是初始值.
5.直接改变module.exports的值时,exports失效。

而 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'

require/exports 和 import/export 形式上的差别形式上看起来五花八门,但本质上:CommonJS 还是 ES6 Module 输出都可以看成是一个具备多个属性或者方法的对象;default 是 ES6 Module 所独有的关键字,export default fs 输出默认的接口对象,import fs from 'fs' 可直接导入这个对象;ES6 Module 中导入模块的属性或者方法是强绑定的,包括基础类型;而 CommonJS 则是普通的值传递或者引用传递。1、2 相对比较好理解,3 需要看个例子:

// counter.js
exports.count = 0
setTimeout(function () {
  console.log('increase count to', ++exports.count, 'in counter.js after 500ms')
}, 500)

// commonjs.js
const {count} = require('./counter')
setTimeout(function () {
  console.log('read count after 1000ms in commonjs is', count)
}, 1000)

//es6.js
import {count} from './counter'
setTimeout(function () {
  console.log('read count after 1000ms in es6 is', count)
}, 1000)

分别运行 commonjs.js 和 es6.js:

➜  test node commonjs.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in commonjs is 0
➜  test babel-node es6.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in es6 is 1

相关文章

网友评论

      本文标题:import/export与requre/exports的区别

      本文链接:https://www.haomeiwen.com/subject/gujmxftx.html