用户安装软件包时如何告诉npm忽略安装反应

编程问答 2022-08-11

问题描述

我正在捆绑一个打字稿React组件包，我想知道在用户安装react组件包时是否有一种方法可以忽略react和react-dom。

如果我不从节点模块中删除react和react dom，用户将遇到此问题

错误：无效的挂钩调用。挂钩只能在身体内部使用 功能组件。可能发生以下情况之一 原因：

如果我已经做出反应并从节点模块中删除了dom，则组件可以正常工作。我不想继续来回删除节点模块。我该如何简化呢？

我如何告诉package.json忽略react和react节点模块中的dom？

tsconfig.json 

{
  "compilerOptions": {
    "outDir": "dist","sourceMap": true,"noImplicitAny": true,"esModuleInterop": true,"module": "esnext","target": "es6","moduleResolution": "node","jsx": "react"
  },"exclude": ["examples"]
}

package.json 

{
  "name": "commentBox-simple-demo","version": "1.0.0","description": "","main": "dist/index.js","scripts": {
    "start": "webpack-dev-server --mode development","transpile": "tsc","prepublishOnly": "npm run transpile"
  },"author": "","license": "ISC","devDependencies": {
    "@babel/core": "^7.11.6","@babel/preset-env": "^7.11.5","@babel/preset-react": "^7.10.4","@types/react": "16.9.23","@types/react-dom": "16.9.5","awesome-ts-loader": "^1.3.1","babel-core": "^6.26.3","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","css-loader": "^4.3.0","html-webpack-plugin": "^4.4.1","react": "^16.13.1","react-dom": "^16.13.1","style-loader": "^1.2.1","ts-loader": "6.2.1","typescript": "3.8.3","webpack": "^4.44.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
  },"peerDependencies": {
    "react": "^16.3.0","react-dom": "^16.3.0"
  },"dependencies": {
    "@material-ui/core": "^4.11.0","@material-ui/icons": "^4.9.1","@material-ui/types": "^5.1.0"
  }
}

webpack.config.js 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  template: path.join(__dirname,"examples/index.html"),filename: "./index.html",});
module.exports = {
  entry: path.join(__dirname,"examples/index.tsx"),output: {
    path: path.join(__dirname,"dist"),filename: "index.js",},module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,use: "ts-loader",exclude: /node_modules/,{
        test: /\.css$/,use: ["style-loader","css-loader"],],plugins: [htmlWebpackPlugin],resolve: {
    extensions: [".js",".jsx",".ts",".tsx"],devServer: {
    port: 3001,};

解决方法

您基本上已经告诉npm通过将react和react-dom放在peerDependencies下来做到这一点。这告诉npm不要为您的软件包安装react和react-dom，而是假设正在使用您的软件包的项目已经具有react和react-dom作为依赖项。

尝试将react和react-dom添加到webpack配置的externals属性中。这告诉webpack不要将它们与您的组件一起打包，并且应该减少版本冲突。

reactjsreactjsreactjsreactjstsconfigwebpackwebpackwebpack