支持cjs及esm的npm包实现示例详解

目录
  • 正文
    • tsc
    • cjs
    • esm
    • package.json
    • rollup
    • rollup.config.js
    • package.json
    • webpack
    • webpack.config.js
    • package.json
    • esbuild

正文

模块化是一个老生常谈的问题了，打包工具层出不穷。

那么，如何利用这些打包工具去打出既支持cjs，又支持esm的npm包呢。

这篇文章不涉及概念，是一些打包实测。

demo repo: github.com/FrankKai/np…

可以clone下来，本地构建测试。

  • tsc
  • rollup
  • webpack
  • esbuild

tsc

  • tsconfig.json
  • tsconfig-esm.json
  • package.json

cjs

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "commonjs",
    "outDir": "./dist/cjs",
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

esm

tsconfig-esm.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "outDir": "./dist/esm",
    "moduleResolution": "node"
  }
}

package.json

{
  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "scripts": {
    "build": "rm -rf dist && tsc -p tsconfig.json && tsc -p tsconfig-esm.json"
  },
}

rollup

  • rollup.config.js
  • package.json

rollup.config.js

export default [
  {
    input: "src/index.js",
    output: [
      { file: "dist/index.cjs.js", format: "cjs" },
      { file: "dist/index.esm.js", format: "es" },
    ],
  },
];

package.json

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "build": "rollup -c",
  },
}

webpack

  • webpack.config.js
  • package.json

webpack.config.js

const path = require("path");
module.exports = {
  mode: 'none',
  entry: {
    "index.cjs": {
      import: './src/index.js',
      library: {
        type: 'commonjs2',
      },
    },
    "index.esm": {
      import: './src/index.js',
      library: {
        type: 'module',
      },
    },
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js",
    clean: true,
  },
  experiments: {
    outputModule: true
  }
};

package.json

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "build": "webpack",
  },
  "devDependencies": {
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"
  }
}

esbuild

  • package.json
{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "scripts": {
    "esbuild:cjs": "esbuild ./src/index.js --bundle --outfile=dist/index.cjs.js --format=cjs",
    "esbuild:esm": "esbuild ./src/index.js --bundle --outfile=dist/index.esm.js --format=esm",
    "build": "npm run esbuild:cjs && npm run esbuild:esm"
  },
  "devDependencies": {
    "esbuild": "^0.14.49"
  },
}

以上就是支持cjs及esm的npm包的示例详解的详细内容，更多关于npm包支持cjs esm的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 小项目中管理npm包版本的思路与方法

    背景 笔者在最近碰到一个问题: 有一些项目没有类似jenkins的自动部署平台,前端部署都是本地执行npm run build命令生成压缩包,然后放到服务器上面,解压到nginx 目录, 但是有的时候遇到一个问题,比如项目中某个成员升级了其他组写的一个组件packageA,但是其他成员可能没有升级,导致上线后就会有一些问题,一个包还好,如果有好几个包都没有升级,那么可能导致一些意想不到的问题. 思路 首先就这个问题,我思考后有以下几个问题 package.json中的包名的版本有几个是用的^x.

  • vue打包npm run build时候界面报错的解决

    用coding-pages打开后显示Failed to load resource: the server responded with a status of 404 (Not Found), 解决方案: 方案一: 找到config里的index.js,打开修改assetsPublicPath 为"./" 方案二: 或者把index.html文件中的路径/去掉: 下面是去掉后的,可以参考下 成功了! 补充知识:启动vue项目 npm run dev 时报errno -4058 进入到

  • npm设置同时从多个包源加载包的方法

    npm设置同时从多个包源加载包的方法

    目录 一.搭建本地仓储 二.创建npm包,并上传到私有仓储 三.设置npm 安装包时从多个仓储源查找 随着前后端分离技术的发展成熟,越来越来越多的后台系统甚至前端系统采用前后端分离方式,在大型前后端分离系统中,前端往往包含大量的第三方js 包的引用,各个第三方包又可能依赖另外一个第三方包,因此急需要一个用于管理项目包之间的依赖关系的一个工具,此时npm就出现了,npm 通常随nodejs 安装的时候一起安装. 项目上经常会出现这么一种情况,就是有一些js包可能是公司内部封装的,而这些包又可能涉及

  • 一文带你了解前端包管理工具npm、yarn和pnpm

    一文带你了解前端包管理工具npm、yarn和pnpm

    目录 为什么需要包管理工具? 版本管理规范 前端主流包管理工具 yarn vs npm vs pnpm 包管理工具安装和版本切换 安装项目依赖 npm .yarn 和 pnpm 常用命令 安全性 lock 文件 性能对比 pnpm 的优势 总结 为什么需要包管理工具? 每种主流编程语言都有包管理工具,比如 java 的 Maven.Gradle,Python 的 pip,nodejs 的 npm.yarn.pnpm 等. 包管理工具的主要作用是管理第三方依赖,也可以看成一个"轮子"工厂

  • 从零使用TypeScript开发项目打包发布到npm

    前言 typescript作为未来前端开发的主流框架,在前端开发的过程中也会越来越主要,相信这篇文章会对你有很大的帮助! 开发环境搭建 创建ming-npm-package文件夹 我在桌面上创建了一个ming-npm-package的文件夹,然后在编辑器里面打开 初始化项目 npm init 通过npm init 初始化项目来创建用户package.json文件 也可以npm init -y 这个是使用的默认的配置,我个人使用的是npm init 设置配置项 package name: (min

  • 解决vue打包 npm run build-test突然不动了的问题

    今天遇到一件很奇葩的事情 输入npm run build-test 突然停在这不动了 what? 不动了?! 后来google了一下 大家都是人才 运行一下这句话 就动了!! npm config set registry http://registry.cnpmjs.org 补充知识:vue_test_unit_e2e常见问题npm run unit单元测试和npm run e2e集成测试问题 vue项目要进行unit和e2e常见问题 localStorage is not available

  • 支持cjs及esm的npm包实现示例详解

    支持cjs及esm的npm包实现示例详解

    目录 正文 tsc cjs esm package.json rollup rollup.config.js package.json webpack webpack.config.js package.json esbuild 正文 模块化是一个老生常谈的问题了,打包工具层出不穷. 那么,如何利用这些打包工具去打出既支持cjs,又支持esm的npm包呢. 这篇文章不涉及概念,是一些打包实测. demo repo: github.com/FrankKai/np… 可以clone下来,本地构建测试

  • PaddleOCR 识别表情包文字示例详解

    目录 引言 安装 PaddleOCR 本地处理 在 flask 中处理 引言 最近在做个表情包的小程序,涉及到表情包搜索功能.我们上传表情包的时候,只有一张图,怎么搜索?这个时候我们想到就是将表情包的文字提取出来,作为搜索的内容.那么这就需要用到 ocr 技术了. 经过几个 ocr 的库的使用,小编强烈推荐使用 PaddleOCR,一款文本识别效果不输于商用的Python库! 对于 PaddleOCR 本文不会过多介绍,可自行搜索.重点是如何使用 PaddleOCR 解决我的问题. 安装 Pad

  • Go库text与template包使用示例详解

    目录 场景 text/template 包 基本用法 模板语法 空白字符 常用 Action 函数 总结 场景 现在的项目,基本都是前后端分离,后端只要提供Json等格式的数据就行.在这个背景下,模板渲染这个功能备受冷落,很少会在项目中用到. 虽然在 http 服务中,模板解析不常用,但日常开发中,巧妙利用模板生成代码,能使我们开发事半功倍.比如: 使用模板初始化项目.比如我们每次新建一个 http 服务,可能都需要 promethue 监控.日志等模块.每次都实现一遍不现实,(或者 copy

  • 支持PyTorch的einops张量操作神器用法示例详解

    目录 基础用法 高级用法 今天做visual transformer研究的时候,发现了einops这么个神兵利器,决定大肆安利一波. 先看链接:https://github.com/arogozhnikov/einops 安装: pip install einops 基础用法 einops的强项是把张量的维度操作具象化,让开发者"想出即写出".举个例子: from einops import rearrange # rearrange elements according to the

  • Node.js中的模块化，npm包管理器详解

    Node.js中的模块化，npm包管理器详解

    目录 模块化的基本概念 什么是模块化 模块化拆分的好处 Node.js中的模块化 Node.js中模块的分类 加载模块 模块作用域 向外共享模块作用域中的成员 module对象 exports对象 npm与包 包 如何下载包 在项目中安装包的命令 解决下包速度慢的问题 为什么下包速度慢 解决方法一--淘宝NPM镜像服务器 解决方法二--切换npm的下包镜像源 解决方法三--nrm 总结 模块化的基本概念 什么是模块化 模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程.对于整个

  • Python3 模块、包调用&路径详解

    如下所示: ''' 以下代码均为讲解,不能实际操作 ''' ''' 博客园 Infi_chu ''' ''' 模块的优点: 1.高可维护性 2.可以大大减少编写的代码量 模块一共有三种: 1.Python标准库 2.第三方模块 3.应用程序自定义模块 ''' # import example # 调用example模块 # from example import example # 调用example模块中的一个example方法 ''' 博客园 Infi_chu ''' ''' 包的特点: 1

  • mysql 协议的ping命令包及解析详解及实例

    mysql 协议的ping命令包及解析详解 前言: MySQL客户端可以用ping命令来检查服务端的状态,正常会返回ok包. mysql通信报文结构 类型 名字 描述 int<3> payload长度 按照the least significant byte first存储,3个字节的payload和1个字节的序列号组合成报文头 int<1> 序列号 string payload 报文体,长度即为前面指定的payload长度 ping命令包 Payload [0e] COM_PIN

  • 对python3 urllib包与http包的使用详解

    urllib包和http包都是面向HTTP协议的.其中urllib主要用于处理 URL,使用urllib操作URL可以像使用和打开本地文件一样地操作.而 http包则实现了对 HTTP协议的封装,是urllib.request模块的底层. 1.urllib包简介 2. http 包简介 1.urllib包简介 urllib包主要模块有: 1.urllib.request -----用于打开 URL网址: 2.urllib.error ---------定义了常见的urllib.request会引

  • MySQL5.6的zip包安装教程详解

    之前我们都是后缀为.msi的文件,换言之就是傻瓜式安装,但是有些版本不容易控制安装路径,或者数据库编码格式,还有些会安装很多无用的服务,但是都没有后缀为.zip文件简单直接,说是在哪里,就在哪里. 1,首先在官网下载一个合适的mysql版本,有msi文件,也有zip文件的,先前是下载了两个一个是5.7.24但是里面缺少一个文件夹:data,还缺少文件:my-default.ini文件,后来下载了5.6.42的zip压缩包,里面就什么都有了 2,把你下载的zip解压到合适的文件夹下面,会发现没有m

  • Java关于jar包的知识详解

    Java关于jar包的知识详解

    在学习jar包之前,要先弄懂Java包,以及关于Java包的相关概念. 一.包 为了更好地组织类,Java提供了包机制.包是类的容器,用于分隔类名空间.如果没有指定包名,所有的示例都属于一个默认的无名包. 格式为: package pkg1[．pkg2[．pkg3-]]: 代码实例: package cn.com.zhouzhou;//包名一定要由小写字母组成 public class Lession1 { public static void main(String[] args) { Sys

随机推荐