遵循的模块化规范不一样

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

// counter.js
exports.count =
setTimeout(function () {
console.log('increase count to', ++exports.count, 'in counter.js after 500ms')
}, ) // commonjs.js
const {count} = require('./counter')
setTimeout(function () {
console.log('read count after 1000ms in commonjs is', count)
}, ) //es6.js
import {count} from './counter'
setTimeout(function () {
console.log('read count after 1000ms in es6 is', count)
}, ) 分别运行 commonjs.js 和 es6.js:
➜ test node commonjs.js
increase count to in counter.js after 500ms
read count after 1000ms in commonjs is
➜ test babel-node es6.js
increase count to in counter.js after 500ms
read count after 1000ms in es6 is

链接:https://www.zhihu.com/question/56820346/answer/150724784

require和import区别的更多相关文章

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

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

  2. require 和 import 区别

    我很懵逼啊  都是在引用模块,那到底用哪个? 参考:https://www.cnblogs.com/hwldyz/p/9145959.html 看来会明白一点的 首先这两个都是为了JS模块化编程使用. ...

  3. require,import区别

    链接:https://www.zhihu.com/question/56820346 遵循的模块化规范不一样 模块化规范:即为 JavaScript 提供一种模块编写.模块依赖和模块运行的方案.谁让最 ...

  4. JS 中的require 和 import 区别

    这两个都是为了JS模块化编程使用. 遵循规范 require 是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 调用时间 require是运行时调 ...

  5. require,import区别?

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

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

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

  7. require和require.async的区别

    本文用seajs来讲解两种模块加载方式require和require.async的区别,类似java里的import,php里的include. <!DOCTYPE html> <h ...

  8. require与import

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

  9. css link和@import区别

    1.link语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" / ...

随机推荐

  1. CMDB服务器管理系统【s5day91】:如何实现允许临时修改主机名

    一.sn号唯一 & 如何实现允许临时修改主机名 1.物理机 1.sn,物理机唯一 2.后台管理: 买服务器,清单:SN号,硬盘,内存... 作业:python 读取excel,xldt 3.资 ...

  2. Linux系统在线安装、启动 redis

    环境: Linux系统:VMware 14 中 CentOS 7 64 位 redis版本:redis-stable.tar.gz(当前版本是:redis-cli 4.0.9) 一.Linux在线安装 ...

  3. JN_0001:在微信朋友圈分享时长大于10s的视频

    1,先在聊天窗口里发送视频. 2,长按视频点击”收藏“. 3,进入微信收藏管理页面,播放视频. 4,点击右上角三点按钮,选择“转存为笔记”. 5,于是在收藏页面中会生成一个新的收藏笔记链接,打开链接再 ...

  4. Dijkstra算法的C++实现

    Dijkstra算法是在图中寻找两顶点最短路径的算法.   下面以下图有向图为例,说明其基本思想. 上图为转化为邻接矩阵存储:     现在我要寻找1点到其他点的最短距离以及路径: a)1点到各点的距 ...

  5. spring cloud 微服务调用--ribbon和feign调用

    这里介绍ribbon和feign调用两种通信服务调用方式,同时介绍如何引入第三方服务调用.案例包括了ribbon负载均衡和hystrix熔断--服务降级的处理,以及feign声明式服务调用.例子包括s ...

  6. Jmeter学习笔记03-元件作用域及执行顺序

    Jmeter可以通过鼠标拖拽来随意改变元件之间的顺序以及元件的层级关系,随着元件所在域的不同,在执行时候,会有不同效果 层级关系和元件类型决定了在测试计划中各元件的执行顺序. 1)元件的作用域: jm ...

  7. 可持久化 trie 的简单入门

    可持久化 $trie$  ....又是一个表里不一的东西..... 可持久化 $trie$  的介绍: 和主席树类似的,其实可持久化就是体现在前缀信息的维护上(搞不懂这怎么就叫做可持久化了...) $ ...

  8. sea.js 个人入门

    玉伯 : http://seajs.org/docs/ 说这两个JS 必须提到AMD.commonjs两种不同的规范: 奇舞团:http://www.75team.com/archives/882 知 ...

  9. lnmp 1.5 mysql数据库开启远程访问

    LNMP默认是禁止远程连接数据库的,但是有时候为了方便,我们想要远程,下面是开启远程的方法 sudo su # 切换为root用户模式,省的接下来操作的时候出现权限问题 mysql -u root - ...

  10. 【原创】大数据基础之Hive(2)Hive SQL执行过程之SQL解析过程

    Hive SQL解析过程 SQL->AST(Abstract Syntax Tree)->Task(MapRedTask,FetchTask)->QueryPlan(Task集合)- ...