Rollup + Typescript output JS файл на компонент - PullRequest
Новая
       5

Rollup + Typescript output JS файл на компонент

1 голос
/ 28 февраля 2020

Я создаю библиотеку компонентов многократного использования с React, TypeScript и Rollup.

Объединение этой библиотеки в один выходной файл index.js прекрасно работает. Но нет .js выходных файлов, сгенерированных для моих отдельных компонентов .

Однако я пытаюсь убедиться, что могу использовать указанный c импорт в моих проектах TypeScript.

Например: import { ComponentA } from "my-components/lib/ComponentA;

Это позволит гарантировать, что мои другие компоненты не будут включены в последующий пакет моего проекта.

Итак, мой вопрос: Как настроить накопительный пакет таким образом, чтобы все компоненты выводились также в отдельные выходные файлы компонентов?

Моя структура файлов выглядит следующим образом: 

src
│ index.ts
└─components
  │ index.ts
  ├─ComponentA
  │   index.ts
  │   ComponentA.tsx
  └─ComponentB
      index.ts
      ComponentB.tsx

Моя конфигурация накопления: 

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import typescript from "rollup-plugin-typescript2";

export default {
  input: "src/index.ts",
  output: [
    {
      file: pkg.main,
      format: "cjs",
      exports: "named",
      sourcemap: true
    },
    {
      file: pkg.module,
      format: "es",
      exports: "named",
      sourcemap: true
    }
  ],
  plugins: [
    external(),
    resolve({
      browser: true
    }),
    typescript({
      rollupCommonJSResolveHack: true,
      exclude: "**/__tests__/**",
      clean: true
    }),
    commonjs({
      include: ["node_modules/**"],
      exclude: ["**/*.stories.js"],
      namedExports: {
        "node_modules/react/react.js": [
          "Children",
          "Component",
          "PropTypes",
          "createElement"
        ],
        "node_modules/react-dom/index.js": ["render"]
      }
    })
  ]
};

Что выводит в: 

lib
│ index.d.ts
│ index.es.js
│ index.es.js.map
│ index.js
│ index.js.map
└─components
  │ index.d.ts
  ├─ComponentA
  │   index.d.ts
  │   ComponentA.d.ts
  └─ComponentB
      index.d.ts
      ComponentB.d.ts

Чего я хочу добиться , так это в том, что в папке output (lib) есть, например, также ComponentA.js и ComponentB.js файлы.

...