Question

我正在开发一个开源D3 / React组件库，并且试图使用Rollup.js捆绑该库，以提供代码拆分，三摇等功能。

该库已经在GitHub和NPM中发布，如果您想尝试使用该库，可以使用该库检查codesandbox作为参考。

接下来，我将尝试重点介绍此捆绑包遇到的不同问题。

该库已经直接在项目中使用代码进行了测试，并且可以完美运行，因此问题出在包中，我认为我在项目中的Rollup.js configuration file做错了事。 / p>

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

在安装devDependencies之后，我得到的错误是下一个错误：

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

我已经在React项目页面上filled an issue，根据他们的说法，这不是React问题，但也许是Webpack的问题，因为当您必须在项目和库中都安装React时通常会发现此错误，并且Webpack发现有两个React实例，我有点同意，因为错误根据包类型或导入程序项目的运行方式而异，如您在codesandbox中所见。

希望您能帮助我在汇总配置文件中发现错误，以及如果您希望在项目事件中更好地进行PR。

将一个React组件库与Rollup.js v1捆绑在一起

错误

0 个答案: