如何使用 TypeScript、Ant Design 和 Rollup 构建组件库

Question

我正在尝试为 TypeScript 中的可重用组件库创建示例样板，对 UI 元素使用 Ant Design，对捆绑使用 Rollup。

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

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

但是，构建输出显示了一些来自 Rollup 的警告，这些警告与重写对 'this' 的引用有关。谁能建议更改我的构建配置以解决此问题？

(!) `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,
...

Answer 1

@Steve，我不知道你是否已经解决了这个问题，但我找到了一个对我有用的解决方案 rollup-plugin-babel:

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import typescript from 'rollup-plugin-typescript2';
import url from 'rollup-plugin-url';

import pkg from './package.json';

const antdVars = require('./src/antd-vars');

export default {
    input: 'src/index.tsx',
    output: [
        {
            file: pkg.main,
            format: 'cjs',
            exports: 'named',
            sourcemap: true,
        },
        {
            file: pkg.module,
            format: 'es',
            exports: 'named',
            sourcemap: true,
        },
    ],
    plugins: [
        peerDepsExternal(),
        url(),
        nodeResolve({
            extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
        }),
        typescript({
            exclude: ['*.d.ts', '**/*.d.ts', '**/*.story.tsx', '**/*.spec.tsx'],
            rollupCommonJSResolveHack: true,
            clean: true,
        }),
        babel({
            babelrc: false,
            plugins: [['import', { libraryName: 'antd', style: true }]],
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            exclude: /\**node_modules\**/,
        }),
        commonjs({
            include: /\**node_modules\**/,
        }),
        postcss({
            extensions: ['.css', '.scss', '.less'],
            use: ['sass', ['less', { javascriptEnabled: true, modifyVars: antdVars }]],
        }),
    ],
};

Answer 2

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

更新后的代码可以在Repo on GitHub

中看到

如何使用 TypeScript、Ant Design 和 Rollup 构建组件库

How to build a component library using TypeScript, Ant Design and Rollup

javascript

reactjs

typescript

antd

rollup