Question

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

Ant Design documentation虽然有用，但没有提供配置汇总的具体细节，而且我也没有运气找到使用同一技术堆栈的示例。

使用来自各种在线来源的信息，我整理了一个大纲样板并将其发布到以下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

此问题已解决，方法是使用rollup-plugin-peer-deps-external更新汇总配置以将antd依赖项标记为外部

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

中看到

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

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

2 个答案: