自定义反应钩子库。Webpack externals 和peerDependency 不起作用

Question

每次新尝试我都会得到 2 个案例：

“无效的钩子调用” - 由于双重 React 环境。

“无法解析“react”” - 如果我将其从挂钩库中的 devDependencies 中删除。

目标是：建立正确的钩子库构建环境。

webpack.config.js

const path = require("path")

module.exports = {
    mode: "production",
    entry: "./src/index.ts",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, 'dist'),
        clean: true,
        library: "custom-hook-lib",
        libraryTarget: "umd"
    },
    externals: {
        'react': 'react',
        'react-dom' : 'reactDOM'
    },

    resolve: {
        extensions: [".js", ".jsx", ".json", ".ts", ".tsx"]
    },
    
    module: {
        rules: [
            {
                test: /\.(j|t)sx?$/,
                exclude: /(node_modules)/,
                use: 'ts-loader'
            }
        ]        
    }
    
}

包.json

{
  "name": "custom-hook-lib",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "files": [
    "dist"
  ],
  "keywords": [],
  "license": "ISC",
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@types/react": "^18.0.17",
    "typescript": "^4.8.2",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "ts-loader": "^9.3.1"
  }
}

Answer 1

经过几天的调查，我可以回答：

不存在建筑问题。我尝试过 tsc、rollup、webpack。我试图窃取已经工作的库构建配置。尝试过创建反应库。之后我从这个视频中了解到，对于测试，如果项目中有钩子，则不能使用 npm/yarn 链接或仅使用本地路径

您应该构建并发布使用钩子进行测试的 React 库。