require，import区分

2019年8月25日 155次阅读 来源: booder

require，import区分

遵照的模块化范例不一样

模块化范例：即为 JavaScript 供应一种模块编写、模块依靠和模块运转的计划。谁让最初的 JavaScript 是那末的裸奔呢——全局变量就是它的模块化范例。

require/exports 诞生在野生范例当中，什么叫做野生范例？即这些范例是 JavaScript 社区中的开发者本身起草的划定规矩，得到了人人的认可或许普遍的运用。比方 CommonJS、AMD、CMD 等等。import/export 则是王谢正直。TC39 制订的新的 ECMAScript 版本，即 ES6（ES2015）中包含进来。

涌现的时候差异

require/exports 相干的范例由于野生性子，在 2010 年前后诞生。AMD、CMD 相对命比较短，到 2014 年基本上就岌岌可危了。一最先人人还比较喜好在浏览器上采纳这类异步小模块的加载体式格局，但并非银弹。跟着 Node.js 盛行和 Browsersify 的鼓起，运转时异步加载逐步被构建时模块兼并分块所替换。Wrapper 函数不再需要了。 2014 年 Webpack 照样新玩意，如今已经是前端必备神器了。

Browsersify、Webpack 一最先的目标就是打包 CommonJS 模块。

CommonJS 作为 Node.js 的范例，一向沿用至今。由于 npm 上 CommonJS 的类库浩瀚，以及 CommonJS 和 ES6 之间的差异，Node.js 没法直接兼容 ES6。所以现阶段 require/exports 任然是必要且实必需的。出自 ES6 的 import/export 相对就晚了很多。被人人所熟知和运用也是 2015 年以后的事了。 这实在要谢谢 babel（本来项目名叫做 6to5，后更名为 babel） 这个神平常的项目。由于有了 babel 将还未被宿主环境（各浏览器、Node.js）直接支撑的 ES6 Module 编译为 ES5 的 CommonJS —— 也就是 require/exports 这类写法 —— Webpack 插上 babel-loader 这个翅膀才最先高飞，人人也才能够称 ” 我在运用 ES6！”

这也就是为何前面说 require/exports 是必要且必需的。由于事实是，现在你编写的 import/export 终究都是编译require/exports 来实行的。

require/exports 和 import/export 情势不一样

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'

require/exports 和 import/export 本质上的差异

情势上看起来八门五花，但本质上：

  1. CommonJS 照样 ES6 Module 输出都能够看成是一个具有多个属性或许要领的对象；

  2. default 是 ES6 Module 所独占的关键字，export default fs 输出默许的接口对象，import fs
    from ‘fs’ 可直接导入这个对象；

  3. 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

链接：https://www.zhihu.com/questio…
泉源：知乎

    原文作者：booder
    原文地址: https://segmentfault.com/a/1190000010472916
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞