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

问题描述

我正在尝试为TypeScript中的可重用组件库创建示例样板，使用针对用户界面元素的Ant Design和用于捆绑的Rollup.

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

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

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

解决方案

已通过使用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屋！