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

我正在尝试为TypeScript中的可重用组件库创建一个示例样板，使用Ant Design进行UI元素设计，并使用汇总进行绑定

虽然有用，但没有给出配置汇总的具体细节，而且我还没有找到使用相同技术堆栈的示例

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

但是，生成输出显示了一些来自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,
...

（！）`this`已重写为`undefined'`
https://rollupjs.org/guide/en#error-这是未定义的
node\u modules\antd\es\affix\index.js
6：导入_从“babel runtime/helpers/inherits”继承；
7：从“babel runtime/helpers/typeof”导入_-typeof；
8:var uu decoration=this&&this.u decoration | |函数（decorators、target、key、desc）{
^
9:var c=arguments.length，
10:r=c<3？目标：desc==null？desc=Object.getOwnPropertyDescriptor（目标，键）：desc，
...

@Steve，我不知道你是否已经解决了这个问题，但我找到了一个解决方案，它使用了

汇总插件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插件peer deps external更新rollup配置以将antd依赖项标记为外部，解决了该问题

---

更新后的代码可以在

中看到。请在问题中包括您的代码的相关部分。改进了问题并修剪了错误日志。请告诉我您是否希望看到任何进一步的更改。感谢发布存储库。我花了一些时间试图使您的项目正常工作，并取得了进展，但没有成功Rollup要求如果无法自动检测到每个模块的导出，则在配置文件中指定这些导出（请参阅）。您为什么要使用Rollup？您好，感谢您花时间研究此问题。可能值得一提的是，我并不反对其他捆绑解决方案（例如webpack）但是，汇总似乎是构建可重用组件库的首选选项。为了更有力地说明汇总，关键要求是启用未使用组件的树抖动。这需要ES6（ES2015）模块。Rollup默认生成ES6模块。Webpack当前无法输出ES6。非常感谢@steve。现在还有一个问题是，没有加载antd样式，您是否碰巧遇到了相同的问题？您好@BehnamEsmaili。刚刚检查，我看到了相同的问题。老实说，我已经放弃了以这种方式使用Ant设计，转而使用Ant使用样式化组件构建定制的UI库。如果你能取得任何进展，我很乐意听到。