关于打的 umd 包在使用时,报 require is not defined 错误的问题出处

blueju 等级 369 0 0

首发于 语雀文档

背景:

前端同事前辈写了一个提供给其他部门的 JS 插件,写的是提供给前端使用的工具类,使用的是 commonjs 规范,导出变量使用的是 module.exports = {} 的方式,使用的是 webpack 打包,打出的包可正常通过 script 标签引入使用,但无法通过 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用。

过程:

鉴于前辈说不需要理会他的 webpack config(他也没发给我),叫我使用之前封装库一贯使用的 dumi 进行打包改造。
遂未进行一步研究他的 webpack config,分析问题出处,直接使用 dumi 进行封装了。

发现新问题(如题):

我们主要需要两类包,
一是提供给工程化项目使用的包,即 commonjs 规范 / es6 规范;
二是提供给非工程化项目使用的包,支持直接在浏览器 script 引入使用的 umd 规范;

我使用 dumi 搭建起工程后,直接将前辈写好的代码复制进去,再写个使用 import xxx from "xxx"/ const xxx = require("xxx") 的方式引入使用的 demo,运行正常,解决了前辈的 webpack 打包中未处理到的一个痛点。

dumi 默认不打 umd 规范的包,需要我自行在 .fatherrc 中配置,我是这么配置的:

配置项详见:https://github.com/umijs/father#umd

// .fatherrc.ts
export default {
  esm: {
    type: 'rollup',
    minify: true,
  },
  cjs: {
    type: 'rollup',
    minify: true,
  },
  umd: {
    name: 'blueju-sdk',
    file: 'blueju-sdk',
    sourcemap: false,
    globals: {
      'blueju-sdk': 'blueju',
    },
    minFile: true,
  },
};

然而报错了:

index.umd.js:28 Uncaught ReferenceError: require is not defined
    at index.umd.js:28
    at index.umd.js:3
    at index.umd.js:4
(anonymous) @ index.umd.js:28
(anonymous) @ index.umd.js:3
(anonymous) @ index.umd.js:4

我是参考 @antv/l7 的打包配置配的,按理来说,不可能有问题。

参考:https://github.com/antvis/L7-boundary/blob/master/.fatherrc.ts

后来发现,问题出在 rollup:
我们不应该将 commonjs 和 es6 混用,而且 rollup 其实并不支持 commonjs,在不借助 @rollup/plugin-commonjs 插件的帮助下。
最常见错误就是:使用 module.exports 导出和 require 引入。

其实根源是 require 引入这个原因的变形错误,我之前遇到过,没记下来,印象不深刻。

参考:

  1. https://github.com/antvis/L7-boundary/blob/master/.fatherrc.ts
  2. https://github.com/antvis/L7/issues/483
  3. https://github.com/rollup/rollup/issues/1058#issuecomment-254187433
  4. https://github.com/rollup/rollup-plugin-commonjs/issues/239
  5. https://github.com/umijs/father
  6. https://www.rollupjs.com/
收藏
评论区

相关推荐

PHP程序员必须会的 45 个PHP 面试题(第二部分)
Q20: require\_once 和 require 在什么场景下使用? Topic: PHP Difficulty: ⭐⭐⭐ require\_once() 作用与 require() 的作用是一样的,都是引用或包含外部的一个 php 文件,require\_once() 引入文件时会检查文件是否已包含,如果已包含,不再包含 (requir
Jenkins安装部署
(https://blog.csdn.net/cc_park/article/details/113917687?utm_mediumdistribute.pc_relevant.nonetaskblogbaidujs_title0&spm1001.2101.3001.4242)Linux系统安装 虚拟机部署参考虚拟机部署Linux(h
Http协议详解
超文本传输协议 请求/响应报文 连接建立的流程 HTTP的特点 请求/响应报文 请求报文 (https://imghelloworld.osscnbeijing.aliyuncs.com/146ca2b87d6a82b2c5c101154d9
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
nodejs获取串口中的信息
获取扫描仪中的信息并传到指定服务器app.js代码 const http require('http');const SerialPort require("serialport");const port new SerialPort('com3');const fs require('fs');var querystring re
「Vue — 插件」视频播放vue-video-player
1:npm install vuevideoplayer save2:在main.js中 jsimport VideoPlayer from 'vuevideoplayer'require('vuevideoplayer/node_modules/video.js/dist/videojs.css')require('vuevide
Node.js 如何处理 ES6 模块
Node.js 如何处理 ES6 模块作者: 日期: 学习 JavaScript 语言,你会发现它有两种格式的模块。一种是 ES6 模块,简称 ESM;另一种是 Node.js 专用的 CommonJS 模块,简称 CJS。这两种模块不兼容。很多人使用 Node.js,只会用require()加载模块,遇到 ES6
第一天:今天学spring的时候遇到一个错误
具体错误如下:Exception in thread "main" org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named 'testDao' is defined at org.springframework.beans.factory.support.D
关于打的 umd 包在使用时,报 require is not defined 错误的问题出处
首发于 <a name"D0c8t"</a 背景:前端同事前辈写了一个提供给其他部门的 JS 插件,写的是提供给前端使用的工具类,使用的是 commonjs 规范,导出变量使用的是 module.exports 的方式,使用的是 webpack 打包,打出的包可正常通过 script 标签引入使用,但无法通过 import xxx from "xxx"/
使用Node.js还可以发邮件?
前言今天,我们给大家开发一个小效果。篇幅比较短,主要给大家展示效果。实战1. 首先我们初始化一个Node项目 npm init y 2. 创建一个app.js文件 'use strict'; const nodemailer  require('nodemaile
使用node.js如何简单快速的搭建一个websocket聊天应用
初始化项目npm init 安装nodejswebsocketnpm install nodejswebsocket 创建并编辑启动文件创建一个名为app.js文件,并且编辑它。var ws  require("nodejswebsocket"); console.log("开始建立连接...") var [user1,user2,user1
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti
报错:cannot use geometry manager pack inside . which already has slaves managed by grid
报错:cannot use geometry manager pack inside . which already has slaves managed by grid原因:一个程序中,最好使用一种布局,否则容易报上面的错误。
Nodejs实现图片的上传、压缩预览、定时删除
前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番。 第一步,node基本配置这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力、更健壮的web框架。 1、引入基本配置 const Koa require('koa');// koa框架const Router require('koaroute
Cocos Creator3.x中使用AES加密解密
Cocos Creator升级3x版本之后就不再支持js了,直接装包cryptojs会报错,require 函数在ts里面 根本就不能识别,但是我们项目中需要用到js的包来实现AES加密解密,尝试了多种方法终于修成正果 使用方法import CryptoJS from "cryptojs.min.js";const aseKey "12345678"