2

当我尝试在我的主机应用程序中使用本地 React 组件库（与汇总捆绑）时，我遇到了可怕的“您可能在同一个应用程序中拥有多个 React 副本”错误（注意：这只发生在我使用钩子时）。如果'react'和'react-dom'包含在devDependencies中（测试/故事书所必需），似乎几乎不可能不将'react'和'react-dom'捆绑到我的库中，尽管它列在我的package.json的peerDependencies和我的外部rollup.config.js（并且，要清楚，它不在“依赖项”下）。

我在网上看到许多解决方案建议将库链接到主机应用程序中的 React 副本（无论是通过别名还是直接从主机应用程序的 node_modules 文件夹解析模块），但这对我不起作用，因为库是在不同的应用程序中使用。它需要捆绑为 peerDependency，在我看来，这不应该这么困难。我们之前使用 webpack 将库中的代码直接捆绑到那些应用程序中，但认为如果我们将其外部化到单独的模块中会更容易维护。

无论如何，这是我的配置。请大神告诉我我做错了什么。

节点v12.16.3 NPM 6.14.4

（包括因为据我了解，npm@7 会自动捆绑 peerDependencies，但更新生产会很麻烦，而且我认为这对于我正在尝试做的事情没有必要）

rollup.config.js

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import babel from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';
import postCssModules from 'postcss-modules';
import svg from 'rollup-plugin-svg-import';

const packageJson = require('./package.json');

export default {
    input: 'src/index.js',
    output: [
        {
            file: packageJson.main,
            format: 'cjs',
            sourcemap: true,
            exports: 'auto',
            globals: {
                react: 'React',
                'react-dom': 'ReactDOM',
                'styled-components': 'styled'
            }
        }
    ],
    external: ['react', 'react-dom', 'styled-component'],
    plugins: [
        peerDepsExternal({
            includeDependencies: true
        }),
        babel({
            babelHelpers: 'bundled',
            exclude: ['node_modules/**', 'public/**'],
            extensions: ['.js', '.jsx'],
            plugins: [
                '@babel/plugin-proposal-object-rest-spread',
                '@babel/plugin-transform-destructuring',
                'babel-plugin-styled-components'
            ],
            inputSourceMap: true
        }),
        commonjs({
            include: /node_modules/
        }),
        svg(),
        postcss({
            plugins: [
                postCssModules({
                    globalModulePaths: [
                        /node_modules\/rc-slider\/assets\/index.css/
                    ]
                })
            ]
        }),
        json(),
        resolve({ preferBuiltins: true, browser: true })
    ]
};

包.json

{
    "name": "MY_PACKAGE",
    "version": "1.0.0",
    "description": "package description",
    "main": "public/index.js",
    "files": [
        "public"
    ],
    "scripts": {
        "unit-tests": "jest --config jest.config.json --testRegex ./.*\\.test\\.js$",
        "unit-tests-watch": "jest --config jest.config.json --watch",
        "generate-docs": "node ./docs_generator/generate.js",
        "storybook": "start-storybook -p 6006 -s stories",
        "storybook-debug": "start-storybook -p 6006 -s stories --debug-webpack",
        "build-storybook": "build-storybook",
        "build": "rollup -c"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "axios": "^0.21.1",
        "clone": "^2.1.2",
        "core-js": "^3.6.5",
        "prop-types": "^15.7.2",
        "rc-slider": "^9.3.1",
        "react-toggle": "^4.1.1"
    },
    "peerDependencies": {
        "react-dom": "^16.13.1",
        "react-is": "^16.13.1",
        "styled-components": "^5.2.1",
        "react": "^16.13.1"
    },
    "devDependencies": {
        "@babel/core": "^7.11.1",
        "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
        "@babel/plugin-transform-destructuring": "^7.10.4",
        "@babel/polyfill": "^7.10.4",
        "@babel/preset-env": "^7.11.0",
        "@babel/preset-react": "^7.10.4",
        "@babel/runtime": "^7.11.2",
        "@rollup/plugin-babel": "^5.2.3",
        "@rollup/plugin-commonjs": "^17.1.0",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-node-resolve": "^11.1.1",
        "@storybook/addon-actions": "^6.1.14",
        "@storybook/addon-essentials": "^6.0.16",
        "@storybook/addon-knobs": "^6.0.16",
        "@storybook/addon-links": "^6.0.16",
        "@storybook/addon-options": "^5.3.19",
        "@storybook/addon-storysource": "^6.0.16",
        "@storybook/addons": "^6.0.16",
        "@storybook/preset-scss": "^1.0.2",
        "@storybook/react": "^6.0.16",
        "@storybook/source-loader": "^6.0.16",
        "animejs": "^2.2.0",
        "babel-core": "^7.0.0-bridge.0",
        "babel-jest": "^26.3.0",
        "babel-plugin-styled-components": "^1.11.1",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.3",
        "enzyme-to-json": "^3.5.0",
        "eslint": "^7.7.0",
        "eslint-config-airbnb": "^18.2.0",
        "eslint-plugin-import": "^2.22.0",
        "eslint-plugin-jsx-a11y": "^6.3.1",
        "eslint-plugin-react": "^7.20.6",
        "eslint-plugin-react-hooks": "^4.2.0",
        "jest": "^26.4.0",
        "jest-junit": "^11.1.0",
        "jest-styled-components": "^7.0.3",
        "node-sass": "^4.14.1",
        "postcss": "^8.2.5",
        "postcss-modules": "^4.0.0",
        "react-docgen": "^5.3.0",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-is": "^16.13.1",
        "regenerator-runtime": "^0.13.7",
        "rollup": "^2.38.5",
        "rollup-plugin-peer-deps-external": "^2.2.4",
        "rollup-plugin-postcss": "^4.0.0",
        "rollup-plugin-sourcemaps": "^0.6.3",
        "rollup-plugin-svg-import": "^1.5.1",
        "sass-loader": "10.1.1",
        "styled-components": "^5.2.1",
        "typescript": "^4.1.5"
    },
    "private": "true"
}
4

0 回答 0