CJS 和 ES6 模块之间的语法差异

2023-11-25

在 CJS 模块中我会使用export and var plugin = require('plugin');导出/导入
在 ES6 模块中我会使用export and import * as plugin from 'plugin';导出/导入。

还有更多语法差异吗?这些 ^ 差异是否正确?

什么是export default and export *?


CommonJS 模块和 ES6 模块非常相似,但它们有一些非常重要的差异需要注意。首先直接回答你的问题:

var plugin = require('plugin');

在 ES6 中相当于两者

// Import all named exports of 'plugin'.
import * as plugin from 'plugin';

and/or

// Import default export of 'plugin'.
import plugin from 'plugin';

// an alias of
import {default as plugin} from 'plugin';

但这取决于“插件”是如何编写的以及是否是用 ES6 编写的export或 CommonJSmodule.exports.

CommonJS 模块

CommonJS 导入只有一个导出对象。该对象可以是函数、对象或任何东西。通常 CommonJS 模块会这样做

exports.foo = ...;
exports.bar = ...;

导出命名属性。他们还可以将“默认”对象导出为

module.exports = function(){};

这里的核心是,如果您既想要默认导出又想要命名导出,则唯一的选择是将属性直接放在默认导出上。

ES6模块

对于 ES6 模块,命名导出和默认导出的概念是 100% 分开的。例如

export var foo = ...;
export var bar = ...;
export default function fn(){};

主要区别在于

fn.foo !== foo;

那么以这个例子来说,有两种情况

插件使用ES6export

import * as plugin from 'plugin';

plugin.foo === ...;
plugin.bar === ...;
typeof plugin === 'object';

import plugin from 'plugin';

plugin.foo === undefined;
plugin.bar === undefined;
typeof plugin === 'function';

使用 CommonJS 的插件module.exports

import * as plugin from 'plugin';

plugin.foo === ...;
plugin.bar === ...;
typeof plugin === 'object';

import plugin from 'plugin';

plugin.foo === ...;
plugin.bar === ...;
typeof plugin === 'function';

实时绑定导入/导出

您的示例中的另一个主要区别是plugin是实时绑定。这意味着如果稍后在模块内更新它,它将在您的导入中更新自身,例如

// plugin.js

export var foo = 'foo';

export function update(){
    foo = 'bar';
}

// other.js

import {foo, update} from 'plugin';

foo === 'foo';

update();

foo === 'bar'

如果你这样做的话,情况就不会是这样

var foo = require('plugin').foo;
var update = require('plugin').update;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CJS 和 ES6 模块之间的语法差异 的相关文章

  • 最小的 ExtJS 包是什么?

    有谁知道 Ext JS 2 2 所需的最少文件吗 我知道 ExtJS 网站有一个功能 build http extjs com products extjs build ExtJS ext js 的小版本 作为 ext all js 的替代
  • 从 DOM 中删除后,动态添加的 JavaScript 脚本会继续执行

    因此 我正在创建一个 SPA 并使用 AJAX 将 HTML 页面加载到我网站的索引页面中 问题是 当包含我的一个页面时 它似乎会徘 徊并执行其中的 JavaScript 代码 即使它随后从 DOM 中删除 索引 html 正文 div d
  • Chrome 扩展程序中的后台脚本到底何时运行?

    在我的 chrome 扩展中 我有一个后台脚本 它将使用XMLHttpRequest note that this code is in the global scope i e outside of any function also n
  • 为什么“dtoa.c”包含这么多代码?

    我将是第一个承认我对低级编程的整体知识有点稀疏的人 我理解许多核心概念 但我不经常使用它们 话虽这么说 我对需要多少代码感到非常惊讶dtoa c http www netlib org fp dtoa c 在过去的几个月里 我一直致力于用
  • WebDriver:更改事件未触发

    我有一个使用 KnockoutJS 的应用程序 我正在尝试编写一些测试表单的测试 如果您不了解 KnockoutJS 简单来说 它提供了从我的视图到我的数据模型的绑定 这意味着当我在输入字段中键入值时 我的基础对象会自动使用该输入字段值进行
  • React:React 如何确保在浏览器有机会绘制之后调用 useEffect?

    useLayoutEffect 的文档说 useLayoutEffect 内计划的更新将被刷新 在浏览器有机会绘制之前同步进行 useEffect 的文档说 与 componentDidMount 和 componentDidUpdate
  • 使用 easyXDM 调整 IFrame 大小

    我将 iFrame 代码提供给客户 以便他们可以显示我网站上的动态内容 我希望其页面上的 iFrame 能够调整大小以适合我的内容 我按照 easyXDM 网站的说明进行操作 但也许我遗漏了一些东西 我没有收到任何错误 但 iFrame 保
  • JointJS - 处理链接删除点击

    创建链接后 将鼠标悬停在其上会显示红色 X 以将其删除 单击此按钮将触发一系列事件 通过订阅 全部 活动收集 单元格 向下指针 链接 向下指针 cell pointermove x5 似乎可疑 单元格 指针向上 在浏览了文档并花费了太长时间
  • 带有嵌入式 Ruby 的 Javascript:如何安全地将 ruby​​ 值分配给 javascript 变量

    我在页面的 javascript 块中有这一行 res foo 处理这种情况的最佳方法是什么 ruby var里面有单引号吗 否则会破坏 JavaScript 代码 我想我会用红宝石JSON http json org ruby var 上
  • Angular-Datatables + Angular-xeditable:取消可编辑行

    当组合 Angular DataTables 和 Angular XEditable 时 添加新行时会取消可编辑行 这是jsfiddle https jsfiddle net faj61h5d 10 示例操作如下 1 这是初始状态 2 将第
  • 如何在参数上使用 .reduce() 而不是特定的数组或对象?

    我想定义一个函数 flatten 将多个元素展平为一个数组 我知道以下是不可能的 但本质上我想这样做 var flatten function var flattened arguments reduce function acc elem
  • Relay 中的嵌套片段数据始终相同

    我是 Relay 新手 并且遇到了片段上嵌套数据的问题 当我在 graphiql 中进行测试时 以下查询返回正确的数据 因此我确信我的架构是正确的 viewer customers name billing address city 但是
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • Web浏览器控件:如何捕获文档事件?

    我正在使用 WPF 的 WebBrowser 控件加载一个简单的网页 在这个页面上我有一个锚点或一个按钮 我想在我的应用程序后面的代码中 即在 C 中 捕获该按钮的单击事件 WebBrowser 控件是否有办法捕获加载页面元素上的单击事件
  • 如何在 OpenLayers 3 中删除监听器

    我做了一个copy https gis stackexchange com questions 178222 how to delete a listener in openlayers 3我在 stackoverflow 上提出的问题 因
  • IE6 丢失查询字符串

    我有一个使用 javascript 从查询字符串中获取值的页面window location 从网络服务器运行时效果很好 但如果我通过将其放在地址栏中使用 IE6 在本地运行它 c mysite index htm 网站创建的任何查询字符串
  • 如何使用 .append() 将 React 组件附加到 HTML 元素

    我正在尝试对我的博客实现无限滚动 我有 const articlesHTML document querySelector articles 作为容器 每次点击装载更多按钮 我想将新文章附加到主 html 元素 如下所示 const res
  • 盒式捆绑包与 MVC4 捆绑包

    我目前正在开发一个原型 ASP NET MVC 3 解决方案 该解决方案将用作多个项目重写的基础 来自 Web 表单 我的目标之一是跨应用程序实现一些脚本管理 而不是我们目前没有的目标 MVC 3有一个缺陷恕我直言 如果您需要在部分视图或模
  • jQuery fadeOut 一个 div,fadeIn 另一个 div 在其位置

    我正在尝试一个简单的 jQuery 脚本来淡出一个 div 并淡入另一个 div 但由于某种原因 第一个 div 永远不会淡出 这可能是代码的一个明显问题 但我似乎无法弄清楚 div div div div
  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns

随机推荐

  • 获取动态添加的视图的 ID

    如何获取布局中动态添加的View的ID public class Display static int i Dynamic UIActivity dyn private Context context View mField null Te
  • 测试静态 jsonp 响应

    我在发出 jsonp 请求时没有遇到任何问题 但是我不确定是否设置 Web 服务以在 jsonp 中传递响应 首先 服务器是否需要以某种方式配置以允许 jsonp 请求 或者页面只需要正确格式化响应 在我的测试中 我收到了来自 geonam
  • DI/IoC、NHibernate 并帮助它们协同工作

    我正在尝试了解 DI IoC NHibernate 并让它们在我正在开发的应用程序中很好地协同工作 我对 NHibernate 和 DI IoC 都很陌生 所以不太确定我正在做的事情是否是明智的做法 这是场景 该应用程序为用户提供了计算特定
  • 是否有一个 Django 模板过滤器可以处理“...more”,并且当您单击它时,它会显示更多文本?

    假设我有一个很大的段落 我只想显示前 15 个单词 之后 该人单击 更多 以查看其余内容 刚刚启动它 似乎可以做你想做的事情 并且不依赖任何外部 JS 库 免责声明 我还没有在 IE 中尝试过这个 但 chrome 和 firefox 工作
  • 如何从另一个线程更新 GUI 上的文本框[重复]

    这个问题在这里已经有答案了 我是 C 新手 我正在尝试制作一个简单的客户端服务器聊天应用程序 我的客户端窗口窗体上有 RichTextBox 我正在尝试从另一个类中的服务器更新该控件 当我尝试这样做时 我收到错误 跨线程操作无效 控制 te
  • git log --since=<日期> 选项 [重复]

    这个问题在这里已经有答案了 我目前正在通过 Pro Git 这本书学习Git 在书中 当讨论不同的选择时git log since
  • `#pragma Once` 是否已进入 C++0x 中?

    标题说明了一切 有 pragma once已标准化为 C 0x 我不知道有哪个编译器不提供它的实现 并且几乎总是具有相同的语义和名称 All pragma指令导致实现以实现定义的方式运行 这在 C 03 和最新的 C 0x 草案 n3225
  • 在 symfony 2 中验证小数

    我使用 Doctrine 将 symfony2 实体映射到表 属性之一是 var decimal price ORM Column name price type decimal nullable false private price W
  • Erlang:RPC 到节点并在该节点上输出

    有没有办法对节点进行 rpc 调用 但将输出显示在该节点上 而不仅仅是在调用节点上 事实上 如果调用节点不显示输出 我不会太担心 虽然我明白我可以使用 rpc call Node erlang display someTerm 这将在 No
  • 从 Pandas 专栏中删除 Twitter 提及

    我有一个数据集 其中包含来自 Twitter 的推文 其中一些也有用户提及 例如 thisisauser 我尝试在进行其他清理过程的同时删除该文本 def clean text row options if options lowercas
  • perl 反引号:使用 bash 而不是 sh

    我注意到 当我在 perl 中使用反引号时 命令是使用 sh 而不是 bash 执行的 这给我带来了一些问题 我怎样才能改变这种行为 以便 perl 将使用 bash 附言 我尝试运行的命令是 paste filename lt cut d
  • 如何在 java 7 中启用 TLSv1.2?

    我正在尝试使用命令 mvn Dhttps protocols TLSv1 TLSv1 1 TLSv1 2 install mvn Dhttps protocols TLSv1 2 install 在具有 java 1 7 的计算机中启用 T
  • 实体框架 - 实体只读属性映射到相关表的列

    我有一个有趣的问题需要解决 但是虽然很常见 但看起来使用实体框架不容易实现 有两个表 Player Id TeamId FirstName LastName Team Id Name IsProfessional 玩家只能属于一支球队 使用
  • R 闪亮中不存在此 Font Awesome 图标(“齿轮”)

    我今天遇到了一个奇怪的情况 我在 R Shiny 上开发一个应用程序几天了 它在我的笔记本电脑上运行 今天我更换了电脑 安装了新的 Windows 当我运行我的应用程序时 它给了我这个错误 This Font Awesome icon ge
  • 将带有默认值的数组作为参数传递给 int main()

    我很难将数组作为参数传递给int main 与默认值 例如 int main int a 效果很好 一样 int main int a 1 Passing int main 数组也能很好地工作 int main int a 3 然而 将这两
  • 如何从字符串确定日期格式?

    这个问题今天已经被问过 但所有者似乎已经删除了它 即使它有 4 票赞成 不过这个问题太有趣了 我决定再次自己发帖 我有一个 Javascript 对象 它有一个带有日期字符串的属性 现在我想为该属性设置一个新的日期时间 但是在不知道其格式的
  • 如何在Android上管理startActivityForResult

    在我的活动中 我通过以下方式从主要活动中调用第二个活动startActivityForResult 在我的第二个活动中 有一些方法可以完成此活动 可能没有结果 但是 只有其中一个方法返回结果 例如 我从主要活动中调用第二个活动 在此活动中
  • Sqlite:如何重置所有数据库表?

    我想要一个调试函数来执行此操作 但我不知道该函数是否已经存在 为我的每个表检查并使用 删除表 将是一件痛苦的事情 帮助表示赞赏 由于数据库只是一个文件 因此您确实可以删除它 如果您想要更自动化的操作 您可以使用以下命令以编程方式完成所有操作
  • 内核如何通知用户空间程序中断发生

    我正在编写一个用户空间程序和一个内核空间设备驱动程序 目标 一旦发生中断 用户空间程序需要快速执行某些操作 我的天真的方法 用户空间程序使用ioctl调用wait event interruptible 内核ISR调用wake up int
  • CJS 和 ES6 模块之间的语法差异

    在 CJS 模块中我会使用export and var plugin require plugin 导出 导入在 ES6 模块中我会使用export and import as plugin from plugin 导出 导入 还有更多语法