如何在不包含 React 的情况下发布 React 组件

Question

我正在创建一个React 组件并希望发布它。

我已经输入了package.json：

  "peerDependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },

并且期望在使用 webpack 构建我的模块时，我的组件不会大喊：

 Module not found: Error: Can't resolve 'react'

如何在不包含 React 的情况下编译生产组件？

我检查了一些著名的：

react-select react-toggle

并且他们仅在 peerDependecies 中列出了反应（我猜在 devDependecies 中，出于测试和开发目的） 如果我将 react 添加到我的 devDeps 并运行 webpack -p，它会成功编译，但我的组件包中有 react。

这是我的simple webpack config

我错过了什么？

更新 我在 webpack 配置中添加了“external”选项（更新了要点），这是正确编译的，它不包含 React 包，但是当我将它导入到 React 项目中以使用它时，它给了我：

无法读取未定义的属性“组件”

一旦找到我的组件的React.Component...

Answer 1

您可以将其设置为peerDependency，也可以将其添加为devDependency，这样您就可以在本地安装它。确保它在 webpack 配置中为 external。这就是你所需要的一切

见https://webpack.js.org/configuration/externals/#object

  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    },
    'prop-types': {
      root: 'PropTypes',
      commonjs2: 'prop-types',
      commonjs: 'prop-types',
      amd: 'prop-types'
    }
  },

  output: {
    publicPath: '/',
    filename: '[name]',
    library: "foobar",
    libraryTarget: 'umd',
  }

食用时：

"dependencies": { 
  "foobar": "1.0.0",
  "react": "~16.0.0",
  "react-dom": "~16.0.0",
  "prop-types": "^15.6.0"
}