写点什么

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

用户头像
blueju
关注
发布于: 2021 年 05 月 17 日

首发于 语雀文档


<a name="D0c8t"></a>

背景:

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

过程:

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


<a name="x9adD"></a>

发现新问题(如题):

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


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


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


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


// .fatherrc.tsexport 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:<br />我们不应该将 commonjs 和 es6 混用,而且 rollup 其实并不支持 commonjs,在不借助 @rollup/plugin-commonjs 插件的帮助下。<br />最常见错误就是:使用 module.exports 导出和 require 引入。<br />​


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


参考:


  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/

发布于: 2021 年 05 月 17 日阅读数: 14
用户头像

blueju

关注

还未添加个人签名 2019.04.05 加入

还未添加个人简介

评论

发布
暂无评论
关于打的 umd 包在使用时,报 require is not defined 错误的问题出处