时间戳

首页 > 解决方案 > 来自自定义 React Hook 和 React 组件的 NPM 包

reactjs - 来自自定义 React Hook 和 React 组件的 NPM 包

问题描述

我对 NPM 库开发相对较新，并且在使用该库时遇到了一些麻烦。

我想做的是导出一个React Hook和一个React Component。当我在我的应用程序中定义和使用 Hook 和 Component 时，它们运行良好，但是导出它们会导致下面提到的问题。

这是我的package.json

  ...
  "scripts": {
    "build": "webpack",
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.5",
    "@babel/preset-typescript": "^7.12.1",
    "@types/node": "^8.0.14",
    "@types/react": "^16.9.56",
    "@types/react-dom": "^16.9.9",
    "babel": "^6.23.0",
    "babel-loader": "^8.2.1",
    "css-loader": "^5.0.1",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "sass-loader": "^10.0.5",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.11",
    "typescript": "^4.0.5",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0"
  },
  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
  }

这是我的入口文件：

// index.ts
export { useCustomHook } from './hooks/customHook'
export { default as CustomComponent } from './components/CustomComponent'

这是我的webpack.config.js

const path = require('path');

module.exports = {
  entry: path.join(__dirname, 'index.ts'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  }
}

问题/问题

  1. 当我导入并使用我的时，useCustomHook我得到一个 TypeError: Object is not a function or its return value is not iterable. 我怎样才能避免这种情况？
  2. 我可以避免使用吗react，react-dom因为devDependencies我已经有它们了peerDependencies

标签： reactjstypescriptnpmreact-hooksreact-component

解决方案

所以我想通了：最简单的解决方案是放弃webpack并rollup改用。然后一切都很简单。

推荐阅读