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

IT技术 javascript reactjs typescript antd rollup
2021-05-12 05:34:24

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

该蚂蚁设计文档虽然有用，但没有给出具体的细节配置汇总和我已经没有任何运气找到使用相同的技术栈的例子。

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

但是，构建输出显示了许多来自 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,
...
2个回答

@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 }]],
        }),
    ],
};

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

更新后的代码可以在 GitHub 上的Repo 中看到

其它你可能感兴趣的问题
上一篇React BrowserRouter 不适用于嵌套路径 下一篇使用 url React 下载图像