将React组件库发布至CDN而非NPM的构建问题求助

问题背景 #

我开发了依赖axios、React等库的React组件库，计划构建后发布到CDN而非NPM。使用Rollup构建UMD格式后，在HTML脚本中引入该库时，浏览器提示axios未安装。以下是我的Rollup配置：

import typescript from 'rollup-plugin-typescript2';
import css from 'rollup-plugin-css-only';
import pkg from './package.json';
import externalGlobals from 'rollup-plugin-external-globals';
import { visualizer } from 'rollup-plugin-visualizer';
import { terser } from 'rollup-plugin-terser';
// import obfuscator from 'rollup-plugin-obfuscator';

export default {
    input: 'src/index.ts',
    output: [
        {
            file: pkg.main,
            format: 'cjs',
            exports: 'named',
            name: 'lib',
        },
        {
            file: pkg.module,
            format: 'esm',
            exports: 'named',
            name: 'lib',
        },
        {
            file: pkg.iife,
            format: 'iife',
            exports: 'named',
            name: 'lib',
        },
        {
            file: pkg.browser,
            format: 'umd',
            exports: 'named',
            name: 'lib',
        },
    ],
    external: [...Object.keys(pkg.dependencies || {})],
    plugins: [
        terser(),
        typescript({
            typescript: require('typescript'),
        }),
        css({ output: 'bundle.css' }),
        externalGlobals({
            react: 'React',
            'react-dom': 'ReactDOM',
        }),
        visualizer()
    ],
};

解决方案 #

问题根源是你将所有dependencies标记为外部依赖，但仅为React/ReactDOM配置了全局变量映射，axios缺少对应的全局变量映射，导致UMD包运行时无法找到全局的axios实例。

方案1：配置axios全局变量映射（推荐） #

这种方式保持axios作为外部依赖，包体积更小，需要用户先从CDN引入axios：

• 修改externalGlobals插件配置，添加axios的全局变量映射：

externalGlobals({
    react: 'React',
    'react-dom': 'ReactDOM',
    axios: 'axios' // 新增该行
}),

• 在HTML中按顺序引入依赖和你的组件库：

<!-- 先引入所有依赖库 -->
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- 再引入你的组件库UMD脚本和样式 -->
<script src="./path/to/your-library.umd.js"></script>
<link rel="stylesheet" href="./path/to/bundle.css">

方案2：将axios打包进UMD包 #

如果不想让用户额外引入axios，可以将axios从外部依赖中移除，让Rollup把axios打包到你的UMD文件中：
修改external配置，过滤掉axios：

external: Object.keys(pkg.dependencies || {}).filter(dep => dep !== 'axios'),

注意：此方式会增加你的包体积，适合axios体积对你的包影响不大的场景。

内容的提问来源于stack exchange，提问作者Hung Vu