作者:寸志
链接:https://www.zhihu.com/question/56820346/answer/150724784
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

遵循的模块化规范不一样

模块化规范:即为 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

JS require and import的更多相关文章

  1. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  2. 转:彻底搞清楚javascript中的require、import和export

    原文地址:彻底搞清楚javascript中的require.import和export   为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Ja ...

  3. 008_Node中的require和import

    一.js的对象的解构赋值 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuri ...

  4. NodeJS中的require和import

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  5. vue 更新了vue-cli到最新版本后引发的问题: require和import、vue-loader的问题

    "vue-loader": "^12.1.0", "vue-loader": "^12.1.0", "vue- ...

  6. javascript中的require、import和export模块文件

    CommonJS 方式 文件输出如math.js: math.add = function(a,b){ return a+b; }exports.math = math; 文件引入: math = r ...

  7. Node中没搞明白require和import,你会被坑的很惨

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  8. require和import的使用

    一.前言 ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引 ...

  9. require与import

    require 和 import,都是为了JS模块化使用.最近项目中,因为多人协同开发,出现了一个项目中同时使用了require 和 import 引入依赖的情况.正常情况下,一个项目中最好是对引入方 ...

随机推荐

  1. python-day5内置模块time、range、sys、os、shelve、xml、max等

    @os树状目录 import os,os.path def showdir(path,depth):    if depth==0:        print(path)    for item in ...

  2. K2项目开发流程

    (自己的学习资料) K2项目开发流程: 1.在VS2013中设计流程,并在K2 Workspce中测试流程 首先是新建新建一个k2的Process文件..kprx后缀. 在里面创建所需要的流程.由于我 ...

  3. PHP入门——基本巩固

    ----------一.变量 ----------二.运算 ----------三.控制结构 ----------四.函数 ----------六.字符串 ----------七.数组 ------- ...

  4. tomcat Server启动带profile文件

    一般mvn如果配置有环境,直接在tomcat server中无法直接启动,需要在vm或者tomcat启动中添加profile启动. pom.xml中添加: 在<profile>中添加默认p ...

  5. MySql日期与时间函数

    select DATE_FORMAT(date_sub(current_date(), interval 1 day), '%Y-%m-%d') -- 2018-05-29(昨天) select DA ...

  6. css3:神秘的弹性盒子flexbox

    请先运行demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  7. []、()、None的区别

    def product(*numbers): if numbers == (): raise TypeError for x in numbers: if not isinstance (x, (in ...

  8. javaMail实现收发邮件(四)

    JavaMail API中也提供了一些专门的类来对邮件的接收进行相关的操作,在介绍这些类之前,我们先来了解下邮件接收API的体系结构,JavaMai API中定义了一个java.mail.Store类 ...

  9. jmeter入门案例(二)

    jmeter入门简介(一)下载及元件介绍https://www.cnblogs.com/wish5714/p/9714930.html jmeter典型的http请求示例 业务场景 银行卡收单交易,模 ...

  10. SQLServer “无法对数据库'XXX' 执行删除,因为它正用于复制”的解决方法

    “无法对数据库'XXX'执行删除,因为它正用于复制” 解决办法: 执行  sp_removedbreplication 'XXX'  这个语句的解释是:从数据库中删除所有复制对象,但不更新分发服务器上 ...