摘要：，区别遵循的模块化规范不一样模块化规范即为提供一种模块编写模块依赖和模块运行的方案。出现的时间不同相关的规范由于野生性质，在年前后出生。作为的规范，一直沿用至今。这其实要感谢原来项目名叫做，后更名为这个神一般的项目。
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 是必要且必须的。因为事实是，目前你编写的 import/export 最终都是编译require/exports 来执行的。
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 本质上的差别
形式上看起来五花八门，但本质上：
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
链接：https://www.zhihu.com/questio...
来源：知乎
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84613.html
摘要：模块化的进程里，出现了很多模块化的方案，，。随着标准的发布，的规范也被广泛使用了。只是浏览器的支持程度不高，需要配合转码工具使用。输出可以看出，很重要的一个区别就是一个基本值是否会同步变化， js模块化的进程里，出现了很多模块化的方案，commonjs，requirejs(AMD),CMD。随着ES6标准的发布，import/export的规范也被广泛使用了。只是浏览器的支持程度不高，...
摘要：所以，在模块代码执行完之前，根本不知道这个模块到底出了什么东西，这也是和最大的区别，因为是基于关键字的模块化，是可以在解析的过程中就知道导出了什么。 require import 动态评估 静态评估 再运行时报错 再解析时报错 不是关键词 是关键词 语法 CommonJs dep.js module.exports = { foo: function (...
摘要：提倡依赖前置，在定义模块的时候就要声明其依赖的模块。适用场景按需加载条件加载动态的模块路径注关于模块化，详细见阮一峰的入门模块与模块化区别模块化的规范和两种。 模块化开发方便代码的管理，提高代码复用性，降低代码耦合，每个模块都会有自己的作用域。当前流行的模块化规范有CommonJS，AMD，CMD，ES6的import／export CommonJS的主要实践者就是nodejs,一般...
摘要：依赖全部加载完成后，调用回调函数规范异步加载模块规范和很相似，简单，并与和的规范保持了很大的兼容性在规范中，一个模块就是一个文件。 抛出问题： 在开发中在导入模块时经常使用require和import； 导出模块时使用module.exports/exports或者export/export default; 有时候为了引用一个模块会使用require奇怪的是也可以使用import？...
摘要：依赖全部加载完成后，调用回调函数规范异步加载模块规范和很相似，简单，并与和的规范保持了很大的兼容性在规范中，一个模块就是一个文件。 抛出问题： 在开发中在导入模块时经常使用require和import； 导出模块时使用module.exports/exports或者export/export default; 有时候为了引用一个模块会使用require奇怪的是也可以使用import？...
阅读 1673·2021-11-15 11:38
阅读 4514·2021-09-22 15:33
阅读 2332·2021-08-30 09:46
阅读 2176·2019-08-30 15:43
阅读 827·2019-08-30 14:16
阅读 2069·2019-08-30 13:09
阅读 1255·2019-08-30 11:25
阅读 701·2019-08-29 16:42
