從webpack-ed組件庫中排除React-有解無憂

我正在嘗試設定我的專案，以便我可以擁有一個公共庫，然后由兩個不同的 wep 應用程式使用。所有應用程式都使用 React，我正在努力將我使用的第一個 Web 應用程式的一部分分解到它自己的庫中，即公共庫。

迄今為止，

我創建了兩個 npm 包，software/library以及software/app1.
library 有 webpack 和 babel 設定。
我npm link ../library從里面跑了software/app1。

現在我仍然收到訊息：

你可能有不匹配的 React 版本和渲染器（例如 React DOM）

你可能會違反 Hooks 規則

您可能在同一個應用程式中擁有多個 React 副本

看起來 webpack 和 babel 作業正常，因為app1can see ../library，但是library的 React 必須與app1的副本沖突。

在 app1 中運行

npm ls react
app1@0.1.0 /software/app1
├─┬ @testing-library/react@11.2.7
│ └── react@17.0.2 deduped
├─┬ react-dom@17.0.2
│ └── react@17.0.2 deduped
├─┬ react-router-dom@5.3.0
│ ├─┬ react-router@5.2.1
│ │ ├─┬ mini-create-react-context@0.4.1
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ └── react@17.0.2 deduped
├─┬ react-serialize@0.2.0
│ └── react@17.0.2 deduped invalid
├── react@17.0.2 invalid
└─┬ theme@1.0.0 -> /software/theme
  ├─┬ react-dom@16.14.0
  │ └── react@16.14.0 deduped
  └── react@16.14.0

npm ERR! code ELSPROBLEMS
npm ERR! invalid: react@17.0.2 software/app1/node_modules/react

我知道這不可能是 React Hook 問題，因為當它library是app1's source 的一部分時，它里面的鉤子作業得很好。

我會發布我的library/package.json和library/webpack.config.js。

包.json

{
    "babel": {
    "presets": [
        "@babel/env",
        "@babel/react"
    ]
    },
    "type": "module",
    "name": "library",
    "version": "1.0.0",
    "description": "common library",
    "author": "John Smith",
    "main": "./dist/index.js",
    "module": "./dist/index.modern.js",
    "source": "./src/index.js",
    "engines": {
        "node": ">=10"
    },
    "peerDependencies": {
        "react": "^16.14.0",
        "react-dom": "^16.13.1",
        "react-scripts": "^3.4.1"
    },
    "devDependencies": {
        "@babel/cli": "^7.16.0",
        "@babel/core": "^7.16.0",
        "@babel/preset-env": "^7.16.4",
        "@babel/preset-react": "^7.16.0",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.1.0",
        "babel-plugin-transform-react-jsx": "^6.24.1",
        "cross-env": "^7.0.2",
        "css-loader": "^3.4.2",
        "eslint": "^6.8.0",
        "eslint-config-prettier": "^6.7.0",
        "eslint-config-standard": "^14.1.0",
        "eslint-config-standard-react": "^9.2.0",
        "eslint-plugin-import": "^2.18.2",
        "eslint-plugin-node": "^11.0.0",
        "eslint-plugin-prettier": "^3.1.1",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-react": "^7.17.0",
        "eslint-plugin-standard": "^4.0.1",
        "file-loader": "^4.3.0",
        "gh-pages": "^2.2.0",
        "html-webpack-plugin": "^4.0.0-beta.11",
        "microbundle-crl": "^0.13.10",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.0.4",
        "react": "^16.14.0",
        "react-dom": "^16.13.1",
        "react-scripts": "^3.4.1",
        "style-loader": "^0.23.1",
        "url-loader": "^2.3.0",
        "webpack": "^4.42.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^3.11.0",
        "webpack-node-externals": "^3.0.0"
    },
    "files": [
        "dist"
    ]
}

webpack.config.js

import nodeExternals from 'webpack-node-externals';
import path from 'path';
import fs from 'fs';

const PACKAGE = JSON.parse(fs.readFileSync('./package.json'));
const APPNAME = PACKAGE['name'];

export default {
    // entry:'./src/index.js',
    output:{
    path:path.resolve('dist'),
    // filename:'webpack-'   APPNAME   '.js',
    filename:APPNAME   '.js',
    library:APPNAME
    },

    entry: PACKAGE['source'],
    mode: "development",
    externals:[nodeExternals()],
    module: {
    rules: [
        {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: "babel-loader"
        }
        },
        {
        test: /\.css$/,
        use: [
            "style-loader",
            {
            loader: "css-loader",
            options: {
                modules: true
            }
            }
        ]
        },
        {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
        }
    ]
    }
};

過去一天我一直在解決這個問題，但沒有任何解決方案。到目前為止，我已經嘗試過：

只有庫的 React 是 peerDependency 和 devDependency。
添加 webpack 外部

這一切似乎并沒有什么不同。我認為起初它不起作用，因為我沒有設定 babel，但現在它仍然包括庫的 React 并且不起作用。

謝謝。

uj5u.com熱心網友回復：

你在peerDependencies, 和中都有 React devDependencies。

從中的devDependencies屬性中洗掉 React package.json，洗掉node_modules目錄，然后運行npm install.

uj5u.com熱心網友回復：

我最終package.json用匯總替換了我的webpack。出于某種原因，webpack 只是沒有按照說明排除 React，我可以找到如何禁用 React 的包含。看來奇怪的是的WebPack沒有作業，但其實我現在用library在app1現在。這是有效的。

組態檔.babel.js

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ]
};

匯總組態檔

import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss';

const config = [
    {
    input:'src/index.js',
    output:{
        file:'dist/index.esm.js',
        format:'esm',
    },
    external:['react'],
    plugins:[
         postcss({
      plugins: []
         }),
        babel({ exclude:"node_modules/**" }),
    ],
    }
];

export default config;

包.json

{
    "devDependencies": {
        "@babel/cli": "^7.16.0",
        "@babel/core": "^7.16.0",
        "@babel/preset-env": "^7.16.4",
        "@babel/preset-react": "^7.16.0",
        "postcss": "^8.3.11",
        "rollup-plugin-babel": "^4.4.0",
        "rollup-plugin-postcss": "^4.0.1"
    },
    "name": "theme",
    "module": "dist/index.esm.js",
    "files": [
        "dist"
    ],
    "version": "1.0.0",
    "scripts": {
        "build": "rollup -c"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "description": ""
}

這個答案沒有回答問題，但這是我最終開始作業的原因。如果有人知道 webpack 發生了什么以及為什么它不起作用，他們也應該發布它。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/361023.html

標籤：javascript 反应新产品经理网络包

上一篇：減少等于或小于零時改變另一個值的累積和

下一篇：運行React應用程式時獲取有關加載程式的編譯錯誤