对比commonjs和ES6

2023-05-16

总结:

(1)es6模块化就是通过export关键字进行分别导出,通过 export { 变量标识符1,变量标识符2 }进行统一导出,通过 export defalt { key: value }进行默认导出(默认导出可匿名)。但是请注意变量标志符这几个字,也就说统一导出的并不是实际变量,export { key: value }这种写法错误!!里面只能写变量标识符。但是默认导入的是一个真实的对象,里面是可以写key:value的。然后对于导入的话,就用import关键字进行导入就好,有两点,一是可以起别名,二是统一导入和默认导入可以一起。

(2)commonjs模块化就是给exports对象添加属性来导出,分别导出就给exports添加不同的属性,统一导出就给 module.exports = {  } 这个对象里面统一添加key:value。导入的话 就用require引入一下就好。注意一下exports 和 module.exports,其实都是指向同一块引用,所以别随便给 module.exports重新赋值一个对象,会导致导入的对象丢失。

(3)区别:commonjs是加载后立即执行,es6是静态加载,即运行时加载,node默认支持commonjs,如果node里想用es6,文件后缀名得是 .mjs。然后es6还支持再导出!export { a } from ''./a.js'这种,还支持动态导入,返回一个promise 即 import('a.js').then(a => { let b = a.func1 })这种,好高级!终于写完了这一条....

commonjs:

以下代码文件名:a.js

// commonjs模块化
function funA () {
    console.log('a');
}
function funB () {
    console.log('b');
}

// 导出
// 分别导出
exports.funA = funA
exports.funB = funB
// 统一导出
module.exports = { funA, funB }

 以下代码文件名:b.js

// 分别导入
const funcs = require('./a.js')
funcs.funA() // a
funcs.funB() // b

// 统一导入
const { funA, funB } = require('./a.js')
funA() //a
funB() //b

ES6:

以下代码文件名:a.mjs

// ES6模块化
//分别导出
export function funA () {
    console.log('a');
}
export function funB () {
    console.log('b');
}

// 统一导出
export { funA, funB }

// 默认导出
export default { name: 'hui' }

以下代码文件名:b.mjs

// 分别导入
import { funA, funB } from "./a.mjs";
funA()
funB()

// 统一导入
import * as funcs from './a.mjs'
funcs.funA()
funcs.funB()

// 默认导入
import name from './a.mjs'
console.log(name);

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

对比commonjs和ES6 的相关文章

  • ES6之Map和Set有什么不同?

    一 Map 1 定义 Map是ES6提供的一种新的数据结构 它是键值对的集合 类似于对象 但是键的范围不限于字符串 各种类型的值都可以当做键 Object结构是 字符串 值 的对应 Map结构则是 值 值 的对应 2 代码示例 Map本身是
  • cesium很全的入门教程-翻译官网和加入自己理解

    Cesium WorkShop cesium快速入门教程 快速入门教程基本涵盖了大多数的CesiumJS API概念 主要用于Cesium基本入门 对Cesium有全面基本的了解和使用 一 概述 本教程会一步一步教会你做一个项目 主要介绍如
  • 浏览器无法加载本地文件

    问题描述 在Visual Studio Code 编写HTML文件时需要将 csv文件内容在浏览器控制台窗口输出 浏览器控制一直报错 如下图所示 原因 跨域资源共享问题 本地文件是放在file 这样的系统下 而非网络资源比如http 下 造
  • 【ES6】Reflect反射机制

    文章目录 一 Reflect概述 二 用法详解 1 Object gt Reflect 2 修改Object方法的返回结果 3 命令式操作 gt 函数式操作 4 与Proxy对象的方法一一对象 5 apply 总结 一 Reflect概述
  • 上拉加载原理

    实现思路 之前写过一篇触底加载 经过一番苦学钻研 优化一下 样式方面 滚动区域是给固定高度 设置 overflow y auto 来实现 接下来看看js方面的实现 其实也很简单 触发的条件是 可视高度 滚动距离 gt 实际高度 例子我会使用
  • ES6阮一峰入门教程

    地址为 https es6 ruanyifeng com
  • js生成随机颜色

    十六进制颜色 方法1 const randomHex gt Math floor Math random 0xffffff toString 16 padEnd 6 0 console log randomHex 十六进制颜色 方法2 co
  • CJS 和 ES6 模块之间的语法差异

    在 CJS 模块中我会使用export and var plugin require plugin 导出 导入在 ES6 模块中我会使用export and import as plugin from plugin 导出 导入 还有更多语法
  • 很难让 browserify-shim 与 grunt-browserify (> 2.0.2) 一起使用作为转换

    在2 0 2版本中grunt browserify browserify shim已从模块本身中删除并转换为用作transform 而不是直接的option on a grunt browserify task The old使用垫片的版本
  • ES6 面试题 | 14.精选 ES6 面试题

    前端开发工程师 主业 技术博主 副业 已过CET6 阿珊和她的猫 CSDN个人主页 牛客高级专题作者 在牛客打造高质量专栏 前端面试必备 蓝桥云课签约作者 已在蓝桥云课上架的前后端实战课程 Vue js 和 Egg js 开发企业级健康管理
  • 如何正确使用 ES6“导出默认值”和 CommonJS“要求”?

    我一直在努力Webpack教程 http blog madewithlove be post webpack your bags 在其中一个部分中 它给出了包含该问题的一行本质的代码示例 export default class Butto
  • ES6模块的“导入”正式兼容CommonJS和AMD?

    从这篇文章 https hacks mozilla org 2015 08 es6 in deep modules https hacks mozilla org 2015 08 es6 in depth modules 文中写道 新标准旨
  • 如何解决Require.js中的循环依赖?

    基本上 这个想法是 子 模块创建一个对象 并且该对象应该是作为 主 模块的实用程序库的一部分 然而 子 对象depends关于 main 的实用程序 Main module define sub function sub var utils
  • 无法将“mysql2/promise”导入 Node.js 13 / 14 上的 ES 模块 (MJS)

    从 CommonJS 迁移时 cjs 到 ES 模块 mjs 我遇到了将命名空间 CJS 导入 MJS 的问题 import mysqlPromise from mysql2 promise 返回错误 错误 ERR MODULE NOT F
  • CommonJS 'require' 是否仍在使用或已弃用?

    目前Javascript采用importES6 作为导入模块的标准方式 但是 我有时会看到使用 CommonJS 的代码require代替import 我首先想知道两个是否可以一起使用 但似乎两个不能互换 相关堆栈溢出问题 https st
  • Webpack动态请求

    它不起作用 let serviceName AuthService let servicePath app services serviceName let service require servicePath 它正在工作 let ser
  • NodeJS 模块与类

    对我来说 类与 NodeJS CommonJS 模块非常相似 您可以拥有许多它们 它们可以重复使用 它们可以互相使用 并且通常每个文件一个 是什么让模块与类如此不同 使用它们的方式不同 命名空间的差异也很明显 除此之外 它们对我来说似乎非常
  • 未找到命名的导出“类型”。请求的模块“mongoose”是一个 CommonJS 模块,它可能不支持所有 module.exports 作为命名导出

    我有一个用打字稿编写的快速服务器 module es2020 在其 tsconfig 我还开发了另一个es2020我的 graphql API 的模块 仍然是打字稿 并且该模块使用带有此类命名导入的 mongoose import Type
  • 同时支持 CommonJS 和 AMD

    有没有办法创建一个 javascript 微型库 没有依赖项的库 支持以下所有模块格式 异步模块定义 CommonJS 将库的导出公开为全局命名空间对象 无加载程序 是的 我把这个答案归功于ded https github com ded
  • 在使用第三方东西时如何保持 Browserify 包大小合理(如果重要的话通过 grunt )

    我正在尝试捆绑我自己的代码 A 该代码又使用 2 个第三方组件 B 和 C 其中 C 也需要 B 据我所知 所有内容都是使用 CommonJS 节点样式模块编写的 捆绑后单独使用的价格为 60K B 是单独包含的 并假定是全局的 我通过在构

随机推荐

  • C++中的“error:LNK2005 已经在*.obj中定义”异常

    xfeff xfeff C 43 43 中的 error LNK2005 已经在 obj中定义 异常问题 异常现象如下 xff1a C 43 43 中的 error LNK2005 已经在 obj中定义 异常问题 图1 error LNK2
  • 指令和数据都用二进制代码存放在内存中,从时空观角度回答CPU如何区分读出的代码是指令还是数据

    xfeff xfeff 指令用来确定 做什么 和 怎样做 xff0c 数据是 做 的时候需要原始数 计算机可以从时间和空间两方面来区分指令和数据 xff0c 在时间上 xff0c 取指周期从内存中取出的是指令 xff0c 而执行周期从内存取
  • C++类的内存地址存放问题

    了解C 43 43 类地址的存放和分配等问题 xff0c 能帮助我们更深入 更清晰了解类的组成及其使用 自己目前不是很清楚 xff0c 先收集一些网上资料 xff0c 而后再慢慢补充增加的了解 网络收集之 关于结构体和C 43 43 类的内
  • 介绍了如何取成员函数的地址以及调用该地址

    xfeff xfeff 摘要 xff1a 介绍了如何取成员函数的地址以及调用该地址 关键字 xff1a C 43 43 成员函数 this指针 调用约定 一 成员函数指针的用法 在C 43 43 中 xff0c 成员函数的指针是个比较特殊的
  • 类中内容在内存中到底是如何分配的呢?

    xfeff xfeff 分类 xff1a 一个类 xff0c 有成员变量 xff1a 静态与非静态之分 xff1b 而成员函数有三种 xff1a 静态的 非静态的 虚的 那么这些个东西在内存中到底是如何分配的呢 xff1f 以一个例子来说明
  • 什么变量在堆内存里存放,什么变量在栈内存里存放

    堆和栈的区别 stack and heap 一般认为在c中分为这几个存储区 1栈 有编译器自动分配释放 2堆 一般由程序员分配释放 xff0c 若程序员不释放 xff0c 程序结束时可能由OS回收 3全局区 xff08 静态区 xff09
  • C# 泛型(Generic)

    xfeff xfeff 泛型 xff08 Generic xff09 允许您延迟编写类或方法中的编程元素的数据类型的规范 xff0c 直到实际在程序中使用它的时候 换句话说 xff0c 泛型允许您编写一个可以与任何数据类型一起工作的类或方法
  • 基础拾遗------泛型详解

    xfeff xfeff 基础拾遗 xff1a 前言 xff1a 1 泛型的约束2 泛型继承3 关键字default4 泛型方法5 泛型接口6 泛型数组7 泛型委托 基础拾遗 xff1a 基础拾遗 特性详解 基础拾遗 webservice详解
  • ORA-31600: invalid input value INDEX PARTITION for parameter

    运行备份数据库对象的存储过程报如下错误 SQL gt exec proc auto backup begin proc auto backup end ORA 31600 invalid input value INDEX PARTITIO
  • Windows静态库和动态库的调用方法汇总

    静态库的调用方法 第一种 xff1a 项目设置中引用 xff0c 在项目的属性中设置 第二种 xff1a 在代码中使用 pragma comment lib 34 lib文件名 34 第一种方法 步骤一 xff1a 右键单击项目 gt 属性
  • 包含目录、库目录、附加包含目录、附加库目录、附加依赖项之详解

    VS项目中的包含目录 库目录 附加包含目录 附加库目录 附加依赖项均在 34 项目 gt 属性 gt 配置属性 34 下进行配置 xff0c 具体说明如下 xff1a VC 43 43 目录 xff1a 包含目录 xff1a 寻找 incl
  • c++用WinForm做界面的实现

    以前是做C 的 xff0c 对Winform情有独钟 xff0c 最近想转C 43 43 想把以前的一些Delphi转成c 43 43 xff0c MFC我不熟而且用起来相当烦效果又丑 xff0c GTK图形库用起来太麻烦 xff0c 琢磨
  • MFC中绘制动态曲线

    在工控监测领域 xff0c 经常需要动态绘制曲线 xff0c 观察曲线的变化趋势 xff0c 绘制波形图 xff0c 绘制频谱等 在前面4讲中介绍了MFC经常用的 TeeChart 控件和 Hight Speed Chart Ctrl xf
  • c++ 如何获取系统时间

    DoubleSnake 转载http blog csdn net zjnig711 article details 2419081 c 43 43 如何获取系统时间 2008 04 28 15 34 方案 优点 xff1a 仅使用C标准库
  • Run-Time Check Failure #0 - The value of ESP was not properly saved across a function call.... 此错误的解

    调用DLL里的函数 或 类成员函数 碰到此错误 xff1a Run Time Check Failure 0 The value of ESP was not properly saved across a function call Th
  • dll动态库调用约定

    1 动态链接库英文为DLL xff0c 是Dynamic Link Library 的缩写形式 xff0c DLL是一个包含可由多个程序同时使用的代码和数据的库 xff0c DLL不是可执行文件 动态链接提供了一种方法 xff0c 使进程可
  • C++ 事件编程

    43 43 事件编程 在微软 NET 框架中可以定义托管类事件并用委托和 43 61 操作符处理这些事件 这种机制似乎很有用 xff0c 那么在本机 C 43 43 中有没有办法做同样的事情 xff1f Several Readers 确实
  • 回调函数是什么

    回调函数 程序员常常需要实现回调 本文将讨论 函数指针的基本原则并说明如何使用函数指针实现回调 注意这里针对的是普通的函数 xff0c 不包括完全依赖于不同语法和语义规则的类成员函数 xff08 类成员指针将在另文中讨论 xff09 声明函
  • 汇编语言中可以定义变量吗?怎么定义?有局部变量和全局变量之分吗?作用域是什么?

    汇编语言定义变量的格式为 变量名 变量类型 数值列表 其中 变量类型有 DB DW DD等 xff0c 分别表示变量占有的内存空间 依次为1 xff0c 2 xff0c 4个字节 如 A DB 1 2 3 4 就定义了名称为A的4个占1个字
  • 对比commonjs和ES6

    总结 xff1a xff08 1 xff09 es6模块化就是通过export关键字进行分别导出 xff0c 通过 export 变量标识符1 xff0c 变量标识符2 进行统一导出 xff0c 通过 export defalt key v