首页 > 其他分享 >package.json中“type“: “module“是什么含义,es6和commonjs的区别以及require和import使用场景

package.json中“type“: “module“是什么含义,es6和commonjs的区别以及require和import使用场景

时间:2024-11-17 19:46:39浏览次数:3  
标签:es6 commonjs package require module js 模块 import type

"type": "module" 是 Node.js 中 package.json 文件的一个字段,用于指示该项目的模块系统类型。它决定了项目中的 .js 文件应被视为 ECMAScript 模块 (ESM) 还是 CommonJS 模块 (CJS)。

含义和作用:

  • "type": "module":项目中的 .js 文件将默认被视为 ECMAScript 模块 (ESM/ES6)。
  • 默认行为(未定义 "type":项目中的 .js 文件将默认被视为 CommonJS 模块 (CJS)。

区别:

  • CommonJS ("type" 未定义或等于 "type": "commonjs")

    • 使用 require()module.exports
    • 文件扩展名 .cjs 通常用于明确表示 CommonJS 文件。
  • ECMAScript 模块 ("type": "module")

    • 使用 importexport 语法。
    • 文件扩展名 .mjs 通常用于明确表示 ECMAScript 模块文件。
    • 不支持 require(),只能使用 import 语法。

什么时候使用 "type": "module"

如果你正在编写现代 JavaScript 应用程序,并希望使用原生的 ESM 语法 (importexport),可以在 package.json 中添加 "type": "module"。这使得你的 .js 文件默认被解析为 ECMAScript 模块。

示例:

package.json:

{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module"
}

文件中:

你可以使用 import:

import path from 'path';
import fs from 'fs';

注意: 如果你的项目中有需要同时使用 ESM 和 CJS 的文件,可以使用 .mjs(ESM)和 .cjs(CJS)扩展名来明确区分模块类型,而不用依赖 package.json 中的 "type" 字段。

所以我写了一个js脚本,使用require的时候报错了:

node ./cli/creatIcon.js
file:///Users/song/Project/my/PakePlus/cli/creatIcon.js:1
const path = require('path')
             ^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/song/Project/my/PakePlus/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

这是因为你在项目的 package.json 中使用了 "type": "module",使得 Node.js 默认将 .js 文件视为 ES 模块(ESM)。在 ESM 模块中不能使用 require(),需要使用 import。你有两种解决方案:

解决方案 1:将文件扩展名改为 .cjs

creatIcon.js 文件重命名为 creatIcon.cjs,这样 Node.js 会将其视为 CommonJS 模块,你可以继续使用 require()

解决方案 2:修改代码以使用 import

require() 替换为 import 语法,示例如下:

这两种方法都可以解决 require is not defined 的错误。

  1. 修改 creatIcon.js

    import path from 'path';
    import fs from 'fs';
    import png2icons from 'png2icons';
    import sharp from 'sharp';
    
    // 你的其他代码逻辑
    

  2. 确保 package.json 中有 "type": "module": 如果已经存在,则无需更改。

  3. 注意事项

  4. import 语法只能在支持 ESM 的环境中使用(Node.js 版本必须是 12+)。
  5. 如果使用 import 语法,文件加载等异步操作需要 await,并且在模块作用域中需要使用 async 函数或 top-level await

标签:es6,commonjs,package,require,module,js,模块,import,type
From: https://blog.csdn.net/weixin_44786530/article/details/143705123

相关文章

  • ES6 Set和Map数据结构用法详解
    文章目录前言Set数据结构创建Set添加元素删除元素删除所有数据获取set的大小(类似于数组的长度)检查是否包含某个元素四种遍历set的方法1.for...of循环2.forEach方法3.转换为数组后使用for循环4.keys(),values(),entries()集合运算方法Map数据结构创建Map添加元素(设......
  • 4.3 ES6 Class 类
    4.3ES6Class类分类 ES6教程概述在ES6中,class(类)作为对象的模板被引入,可以通过class关键字定义类。class的本质是function。它可以看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。基础用法类定义类表达式可以为匿名或命名。//匿名类l......
  • buildroot --- 通过 tsocks 代理下载 package 速度快
     tsocks配置文件 /etc/tsocks.conf#Thisistheconfigurationforlibtsocks(transparentsocks)#Linesbeginningwith#andblanklinesareignored##Thebasicideaistospecify:#-Localsubnets-Networksthatcanbeaccesseddirectlywithout#......
  • Package libgconf-2-4 is not installed
    背景ubuntu下载官网的向日葵客户端,按照官方的步骤安装,报错如下:Packagelibgconf-2-4isnotinstalled分析用apt-get也下载不下来,官方faq没能找到有用的处理方法,只能自行找到安装包自己安装依赖包离线下载sudowgethttp://th.archive.ubuntu.com/ubuntu/pool/universe/g/g......
  • ES6 的20 个新特性的详细介绍(完整版)
    ES6的20个新特性的详细介绍以及相关知识拓展:目录一.块级作用域二.箭头函数三.类(Class)四.模板字符串五.解构赋值六.默认参数七.扩展运算符八.剩余参数九.Promise十.模块化十一.Symbol十二.Iterators十三.Generators十四.Map数据结构十五.Set......
  • ES6常见语法详解
    原文链接:ES6常见语法详解–每天进步一点点0.什么是ES6ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。ES6实际上是一个泛指,泛指ES2015及后续的版本。1.let、const、var的区别let是es6中新增的语法let只对当前区块定义有效:......
  • Package libxml-2.0 was not found in the pkg-config search path
    1、问题Packagelibxml-2.0wasnotfoundinthepkg-configsearchpath2、检查是否有库文件,nofind/-name"libxml-2.0.pc"echo$PKG_CONFIG_PATH这个变量啥也没有3、尝试解决wgetftp://xmlsoft.org/libxml2/libxml2-2.9.2.tar.gztar-xvflibxml2-2.9.2.tar.gzcdlibxml2-......
  • 【前端知识】es6基础语法介绍
    ES6基础语法介绍概述1.变量声明:let和const2.模板字符串3.解构赋值4.箭头函数5.默认参数值6.类(Classes)7.模块8.扩展运算符(SpreadOperator)9.对象字面量增强10.符号(Symbols)11.迭代器(Iterators)和生成器(Generators)12.承诺(Promises)基本数据类型1.字符串(String......
  • ES6代理和反射新特性,详细讲解
    代理与反射es6新增了代理和反射特性,这两个特性为开发者提供了拦截并向基本操作嵌入额外行为的能力。代理基础<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatib......
  • es6,for....of是异步的嘛? 如何实现循环中异步实现
    for...of循环本身不是异步的,它是同步执行的。这意味着for...of循环会按顺序依次执行每一项,直到循环结束。如果循环中的操作是异步的(例如,async函数或者Promise),则这些异步操作会并发执行,但for...of本身不会等待这些操作完成,除非你显式地处理它们。让我们通过一个例子来说明......