Как создать библиотеку компонентов, используя TypeScript, Ant Design и Rollup - PullRequest
0 голосов
/ 16 ноября 2018

Я пытаюсь создать примерный шаблон для библиотеки повторно используемых компонентов в TypeScript, используя Ant Design для элементов пользовательского интерфейса и Rollup для связывания.

Документация Ant Design хотя и полезна, но не дает конкретных подробностей по настройке накопительного пакета, и мне не повезло найти пример, использующий тот же стек технологий.

Используя информацию из различных онлайн-источников, я собрал схему и опубликовал ее в следующем 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,
...

1 Ответ

0 голосов
/ 14 июля 2019

@ Стив, я не знаю, решили ли вы уже эту проблему, но я нашел решение, которое помогло мне, используя 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 }]],
        }),
    ],
};
...