Связать библиотеку компонентов React с Rollup.js v1 - PullRequest
Новая
       8

Связать библиотеку компонентов React с Rollup.js v1

0 голосов
/ 01 февраля 2019

Я работаю над библиотекой компонентов с открытым исходным кодом D3 / React и пытаюсь связать библиотеку с помощью Rollup.js, чтобы предложить разбиение кода, три встряхивания и т. Д.

Библиотека уже опубликованав GitHub и NPM , и вы можете проверить codesandbox , используя библиотеку для справки на случай, если вы захотите ее попробовать.

Далее IЯ попытаюсь осветить различные проблемы, с которыми я сталкиваюсь в этом комплекте.

Библиотека уже была протестирована с использованием кода непосредственно в проекте, и она отлично работает, поэтому проблема связана с пакетом, и япредположим, что я делаю что-то не так с файлом конфигурации Rollup.js в моем проекте. 

import { readdirSync } from 'fs';
import path from 'path';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';

const CODES = [
  'THIS_IS_UNDEFINED',
  'MISSING_GLOBAL_NAME',
  'CIRCULAR_DEPENDENCY',
];

const getChunks = URI =>
  readdirSync(path.resolve(URI))
    .filter(x => x.includes('.js'))
    .reduce((a, c) => ({ ...a, [c.replace('.js', '')]: `src/${c}` }), {});

const discardWarning = warning => {
  if (CODES.includes(warning.code)) {
    return;
  }

  console.error(warning);
};

const env = process.env.NODE_ENV;

const plugins = [
  external(),
  babel({
    exclude: 'node_modules/**',
  }),
  resolve(),
  replace({ 'process.env.NODE_ENV': JSON.stringify(env) }),
  commonjs(),
  env === 'production' && terser(),
];

export default [
  {
    onwarn: discardWarning,
    input: 'src/index.js',
    output: {
      esModule: false,
      file: 'umd/silky-charts.js',
      format: 'umd',
      name: 'silkyCharts',
    },
    plugins,
  },
  {
    onwarn: discardWarning,
    input: getChunks('src'),
    output: [
      { dir: 'esm', format: 'esm', sourcemap: true },
      { dir: 'cjs', format: 'cjs', sourcemap: true },
    ],
    plugins,
  },
];

Ошибки

Когда я пытаюсь использовать библиотеку, используяпроизводственный комплект (который используется по умолчанию) непосредственно из пакета NPM. Я получил следующую ошибку от одного из блоков: node_modules/silky-charts/esm/chunk-501b9e58.js:5833

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

. Если я использую комплект разработки, то получаюотличатьсяОшибка: 

Failed to compile
../silky-charts/esm/index.js
Module not found: Can't resolve 'react' in '/Users/davidg/Development/personal/silky-charts/esm'

Эта ошибка вынуждает меня установить React, ReactDOM и styled-компоненты, поскольку devDependencies в проекте для библиотеки имеют доступ к коду этих проектов.

После установки devDependencies появляется следующая ошибка: 

Hooks can only be called inside the body of a function component.

Я уже заполнил проблему на странице проекта React, и, по их мнению, это не проблема React, но, возможно,Так как Webpack обычно находит эту ошибку, когда нужно установить React как в проекте, так и в библиотеке, и Webpack обнаруживает, что существует два экземпляра React, и я согласен, поскольку ошибка варьируется в зависимости от типа пакета или способа импортаПроект запускается, как вы можете видеть в codesandbox .

Я надеюсь, что вы можете помочь мне обнаружить ошибку в файле конфигурации свертки, и если вы хотите сделать PR всобытие проекта лучше ?.

...