[模块]ES6与cjs的混合开发

news/2024/7/10 22:54:48 标签: es6, 前端, ecmascript

[模块]ES6与cjs的混合开发

  • 模块语言
  • 混合开发的原因
  • Nodejs中使用ES6
    • 关于动态加载的讲解
  • 项目的模块语言
  • CJS 与 ESM 开发
    • 模块的使用方法
      • 普通模块引入
      • json 文件的引入
      • 普通模块导出
    • CJS兼容ESM
    • ESM兼容CJS(推荐)
    • 全局变量--dirname-filename-esm库
  • 问题
    • Error: EPERM: operation not permitted, rename
    • SyntaxError: Cannot use import statement outside a module
    • Error: Cannot find module 'D:\serverjs\index'

模块语言

现有的模块化开发语言主要包括:

  • CJS(CommonJS):同步的模块化规范
  • ESM-是 JavaScript 语言层面的模块规范,目标是取代其它所有模块化开发规范,成为前端领域的标准模块规范

因为 ESM 是下一代的标准,所以开发的时候尽量使用ESM

混合开发的原因

因为最早使用的CJS(CommonJS)规范开发,后来随着ES6规范的开始,大部分的库陆续转化成ES6的规范,但是部分仍旧是使用的CJS的规范,在一个ESM的项目中使用了CJS的模块,就导致了项目的混合开发

Nodejs中使用ES6

在 Node.js 中使用 ES6 的 import / exportrequire 的区别主要体现在以下几个方面:

  1. import / export 是 ES6 的模块化语法,而 require 是 Node.js 的模块化语法
  2. import / export 是静态的,只能在模块的顶层使用,而 require 是动态的,可以在任何地方使用
  3. import / export 可以导出多个变量、函数等,而 require 只能导出一个对象
  4. import / export 是异步加载模块,而 require 是同步加载模块

总的来说,如果你使用的是 ES6 的语法,建议使用 import / export ,否则使用 require ,但是如上所说ESM 是下一代的标准,所以逐渐的nodejs使用ES6的方式越来越方便

关于动态加载的讲解

地址

项目的模块语言

package.json 中的 type 字段用来指定项目的类型,默认为commonjs。type的取值包括:

  • commonjs: 表示该包是一个 CommonJS 模块(即 Node.js 默认的模块格式)
  • module: 表示该包是一个 ES 模块(即标准的 ECMAScript 模块格式)
  • json: 表示该包仅包含 JSON 数据,可以通过 require() 函数或 ES6 的 import 语句来导入

在项目中,不同文件的后缀表明:
.cjs是使用CommonJS规范
.mjs是使用ES规范
.js则以package.json中的type字段为准

所以可以通过以上不同的文件后缀来实现项目的混合开发

CJS 与 ESM 开发

CJS 与 ESM规范在使用上有非常多的不同之处,下面是本人一个CJS的项目升级到ESM规范的过程中遇到的各种问题

模块的使用方法

CJS通过require引入,module.exports导出;

ESM通过import引入,export导出;

普通模块引入

const path = require("path");//CJS
import path from "path";//ESJ

json 文件的引入

const pkg = require("../package"); //CJS 获取package.json的数据

import pkg from "../package.json" assert { type: "json" };//ESJ

import是不可以直接引入json文件的

普通模块导出

module.exports = upgrade;//cjs
export default upgrade;//esj

CJS兼容ESM

(async function() {
  const esm = await import('esm');
  esm.a();
  esm.b();
})();

ESM兼容CJS(推荐)

ESM可以直接 importCJS 模块,越来越多的库使用ESM,建议新项目优先使用ESM规范。

import { a, b } from 'cjs';
a();
b():
//或者
import a from 'cjs';
a()

全局变量–dirname-filename-esm库

ESM中没有注入__dirname、__filename全局变量,可以通过dirname-filename-esm库获取

__dirname:执行命令的文件所在目录的绝对路径(不包含当前文件名)
__filename:当前文件的绝对路径(包含文件名)

import { dirname } from 'dirname-filename-esm'

// 拿到执行命令文件所在目录的绝对路径
const __dirname = dirname(import.meta)
console.log(__dirname)

import { filename } from 'dirname-filename-esm'
// 获取文件绝对路径
const __filename = filename(import.meta)

// 如果不引入库dirname-filename-esm 可以通过以下方式
// import { fileURLToPath } from 'node:url'
// const __filename = fileURLToPath(import.meta.url)

问题

Error: EPERM: operation not permitted, rename

请检查当前命令是不是在编辑器中执行,要修改的文件夹是不是在编辑器中被打开;如果被打开,请关闭编辑器,在cmd等终端的对应项目目录下执行

请检查当前命令执行的命令,是否已经存在将要被修改成的名称的文件夹或文件,导致了命名冲突的问题;如果已经存在,修改新的命名,或者删除已经存在的命名

SyntaxError: Cannot use import statement outside a module

该问题就是在cjs规范的项目中使用了import的导入方式,此时 :

  1. package.json 文件中 type:commonjs,表明使用CJS规范
  2. 报错文件使用js后缀,将默认遵循package.json设定的规范
  3. 报错文件中使用了ESM的规范

解决方案是,将报错文件的后缀改为mjs,表明当前文件使用ESM规范

Error: Cannot find module ‘D:\serverjs\index’

该问题是在package中script中定义的某个命令test运行导致的:

{
  "script":{
    "test" :"node  ./serverjs/index"
  }
}

运行后报错:
`
node:internal/modules/cjs/loader:936
throw err;

Error: Cannot find module ‘D:\serverjs\index’
`
然后找到该文件确实存在,但是后缀名是".mjs",所以命令无法自动识别后缀非js文件,需要在命令中明确后缀名

node ./serverjs/lowdb/bin/index.mjs

问题解决!!!


http://www.niftyadmin.cn/n/5164140.html

相关文章

3、FFmpeg基础

1、FFmpeg 介绍 FFmpeg是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库。 2、FFmpeg 组成 - libavformat:用于…

AndroidStudio 运行报错:Invalid keystore format

AndroidStudio 运行报错:Invalid keystore format 把这玩意儿删了重新打开Android Studio运行一下就好了!!!

漏刻有时百度地图API实战开发(3)自动获取地图多边形中心点坐标

在百度地图中,多边形覆盖物表示地图上的多边形区域。这些区域可以是封闭的,也可以是开放的。多边形覆盖物通常用于表示地图上的行政区划、地标或任何需要强调的区域。 多边形覆盖物拥有自己的地理坐标,并能随着地图的拖动或缩放而相应地移动…

python自动化测试(十一):写入、读取、修改Excel表格的数据

目录 一、写入 1.1 安装 xlwt 1.2 增加sheet页 1.2.1 新建sheet页 1.2.2 sheet页写入数据 1.2.3 excel保存 1.2.4 完整代码 1.2.5 同一坐标,重复写入 二、读取 2.1 安装读取模块 2.2 读取sheet页 2.2.1 序号读取shee页 2.2.2 通过sheet页的名称读取she…

Web学习笔记-Vue3(环境配置、概念、整体布局设计)

笔记内容转载自 AcWing 的 Web 应用课讲义,课程链接:AcWing Web 应用课。 CONTENTS 1. 环境配置2. 基本概念3. 导航栏4. 页面创建5. 用户动态页面实现 Vue 官网:Vue.js。 Vue.js 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML…

yum命令中的gcc是什么含义?答:是一种包,并不是参数。

gcc 是 GNU Compiler Collection 的缩写,它是一种广泛用于编译和构建C、C和其他编程语言的编译器套件。 比如对于安装Python前的准备工作命令: sudo yum install gcc openssl-devel bzip2-devel libffi-devel具体而言,在这条命令中&#xf…

投票助手图文音视频礼物打赏流量主小程序开源版开发

投票助手图文音视频礼物打赏流量主小程序开源版开发 图文投票:用户可以发布图文投票,选择相应的选项进行投票。 音视频投票:用户可以发布音视频投票,观看音视频后选择相应的选项进行投票。 礼物打赏:用户可以在投票过…

Selenium切换窗口句柄及调用Chrome浏览器

一. 调用Chrome浏览器 首先,假设通过Firefox()浏览器定向爬取首页导航栏信息,审查元素代码如下图所示,在div class="menu"路径的ul、li、a下,同时可以定位ul class="clearfix"。 # coding=utf-8 import os from selenium import webdriver #…