如何使用 TypeScript、Ant Design 和 Rollup 构建组件库 [英] How to build a component library using TypeScript, Ant Design and Rollup

问题描述

我正在尝试为 TypeScript 中的可重用组件库创建一个示例样板，将 Ant Design 用于 UI 元素并使用 Rollup 进行捆绑.

Ant Design 文档 虽然很有用，但没有提供具体细节用于配置 Rollup，但我没有找到使用相同技术堆栈的示例.

使用来自各种在线资源的信息，我整理了一个大纲样板并将其发布到以下 GitHub 存储库

但是，构建输出显示了许多来自 Rollup 的警告，这些警告与重写对this"的引用有关.任何人都可以建议更改我的构建配置以解决此问题吗?

(!) `this` 被重写为 `undefined`https://rollupjs.org/guide/en#error-this-is-undefinednode_modules\antd\es\affix\index.js6:从babel-runtime/helpers/inherits"导入_inherits；7:从babel-runtime/helpers/typeof"导入_typeof；8: var __decorate = this &&this.__decorate ||功能(装饰器，目标，键，desc){^9: var c = arguments.length,10: r = c <3 ?目标:desc === null ?desc = Object.getOwnPropertyDescriptor(target, key) : desc,...

解决方案

通过更新 rollup 配置以使用 rollup-plugin-peer-deps-external 将 antd 依赖项标记为外部来解决该问题

更新后的代码可以在 GitHub 上的存储库中看到

I'm trying to create an example boilerplate for a library of reusable components in TypeScript, using Ant Design for UI elements and Rollup for bundling.

The Ant Design documentation although useful, doesn't give specific details for configuring Rollup and I've not had any luck finding an example using the same technology stack.

Using information from various online sources I've put together an outline boilerplate and published it to the following GitHub repository

However, the build output is showing a number of warnings from Rollup relating to rewriting references to 'this'. Can anyone suggest changes to my build config to resolve this issue?

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en#error-this-is-undefined
node_modules\antd\es\affix\index.js
 6: import _inherits from "babel-runtime/helpers/inherits";
 7: import _typeof from "babel-runtime/helpers/typeof";
 8: var __decorate = this && this.__decorate || function (decorators, target, key, desc) {
                     ^
 9:     var c = arguments.length,
10:         r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
...

解决方案

The issue was resolve by updating the rollup config to mark the antd dependencies as external using rollup-plugin-peer-deps-external

The updated code can be seen in the Repo on GitHub

这篇关于如何使用 TypeScript、Ant Design 和 Rollup 构建组件库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！