将React组件库与汇总.js第1版

我正在开发一个开源的D3/React组件库,并尝试使用汇总.js提供分码、三抖等。

该库已在中发布 GitHub 和 NPM 你可以查一个 codesandbox

接下来,我将尝试强调我在这个捆绑包中遇到的不同问题。

Rollup.js configuration file 在我的项目中。

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和样式化组件,因为库的项目中的devdependency可以访问这些项目代码。

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

我已经知道了 filled an issue 在React项目页面中,根据他们的说法,这不是React问题,但可能是一个Web包的问题,因为当您必须在项目和库中安装React时,Web包通常会发现此错误,并且Web包发现有两个React实例,我有点同意,因为错误会因包类型或导入程序项目的运行方式而异,正如您在 代码沙盒 .

我希望你能帮助我发现汇总配置文件中的错误,如果你想在项目事件中做公关更好。