React+Antd 踩坑笔记：加入 CDN 引入组件打包失败问题-JavaScript中文网-JavaScript教程资源分享门户

背景

React 是一个非常流行的前端框架，而 Antd 是一套基于 React 的 UI 组件库。在使用 React 和 Antd 开发项目时，我们通常会通过 npm 安装相应的依赖包，然后在代码中引入组件。但是，有时候我们也会考虑使用 CDN 引入 Antd 组件，以减少项目打包的体积。

问题描述

在使用 CDN 引入 Antd 组件时，我们通常会在 HTML 文件中加入相应的 <link> 和 <script> 标签。但是，有时候我们会发现，在打包项目时会出现以下错误：

Module not found: Error: Can't resolve 'antd' in '/path/to/project'

这个错误的原因是什么呢？如何解决呢？

原因分析

要解决这个问题，我们需要先了解一下 React 和 Antd 的打包机制。

在使用 npm 安装 React 和 Antd 时，它们会被打包成一个个模块，然后通过 webpack 等打包工具打包成一个或多个 bundle 文件。而在使用 CDN 引入 Antd 组件时，我们实际上是直接引入了 Antd 的源代码，而没有经过打包。

这样一来，在我们的代码中引用 Antd 组件时，webpack 等打包工具就无法找到相应的模块，从而导致打包失败。

解决方案

要解决这个问题，我们可以通过如下两种方式之一来引入 Antd 组件：

1. 直接引入打包后的 Antd 组件

我们可以在本地安装 Antd，然后使用 webpack 等打包工具将它打包成一个或多个 bundle 文件。然后，我们将这些打包后的文件上传到 CDN 上，最后在 HTML 文件中引入这些文件。

这种方式的好处是，我们可以使用 webpack 等打包工具对 Antd 进行进一步的优化和定制。同时，我们也可以将打包后的 Antd 组件与我们自己的代码一起打包，从而减少 HTTP 请求的次数，提高页面加载速度。

2. 使用 UMD 版本的 Antd

Antd 提供了一份 UMD 版本的代码，可以直接在浏览器中使用。我们可以将这份代码上传到 CDN 上，然后在 HTML 文件中引入它。

这种方式的好处是，我们可以直接使用 Antd 提供的组件，无需进行额外的打包操作。同时，由于 UMD 版本的 Antd 包含了所有的组件和依赖，因此我们也不需要额外安装任何依赖。

示例代码

直接引入打包后的 Antd 组件

首先，我们需要在本地安装 Antd：

npm install antd --save

然后，在 webpack 配置文件中添加如下配置：

// javascriptcn.com 代码示例
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

接着，在项目中引入 Antd 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'antd';

ReactDOM.render(<Button type="primary">Hello, Antd!</Button>, document.getElementById('root'));

最后，我们可以使用 webpack 将项目打包成一个 bundle 文件：

npm run build

然后，我们将打包后的文件上传到 CDN 上，最后在 HTML 文件中引入这个文件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React+Antd</title>
    <link rel="stylesheet" href="https://cdn.example.com/antd.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.example.com/bundle.js"></script>
  </body>
</html>

使用 UMD 版本的 Antd

我们可以直接在 HTML 文件中引入 Antd 的 UMD 版本：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React+Antd</title>
    <link rel="stylesheet" href="https://cdn.example.com/antd.css" />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.example.com/antd.umd.js"></script>
    <script src="https://cdn.example.com/index.js"></script>
  </body>
</html>

然后，在我们的代码中直接使用 Antd 的组件：

ReactDOM.render(<antd.Button type="primary">Hello, Antd!</antd.Button>, document.getElementById('root'));

总结

通过本文的介绍，我们了解了在使用 CDN 引入 Antd 组件时可能会遇到的打包失败问题，并介绍了两种解决方案。希望本文能够帮助大家更好地使用 React 和 Antd 开发项目。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653c52d37d4982a6eb67e3fc