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中，我猜测为测试和开发目的）做出反应如果我添加对我的devDeps的反应并运行webpack -p它会成功编译，但我的组件包中有react。

这是我的simple webpack config

我错过了什么？

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

无法读取未定义

的属性'Component'

发现我的组件的React.Component ......

Answer 1

您可以将其设置为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> </head> <body> <table class="lead" cellspacing="0" width="100%" style="font-size: 12px; font-family: 'firefly, DejaVu Sans, sans-serif'; "> <thead> <tr> <th width="10%" style="font-weight: bold;">Date</th> <th width="15%" style="font-weight: bold;">Name</th> <th width="20%" style="font-weight: bold;">Details</th> <th width="10%" style="font-weight: bold;">Contact Origin</th> <th width="15%" style="font-weight: bold;">Status</th> <th width="10%" style="font-weight: bold;">Comment</th> <th width="10%" style="font-weight: bold;">Country</th> </tr> </thead> <tbody> <?php foreach($leadInfo as $k=>$v){ $continent = getAllContinentName($v->country); if(strtolower($continent) == strtolower("Asia")){ $backGround = "#FFB300"; } else if(strtolower($continent) == strtolower("Africa")){ $backGround = "#FFB300"; } else if(strtolower($continent) == strtolower("North America")){ $backGround = "#009792"; } else if(strtolower($continent) == strtolower("South America")){ $backGround = "#FF7E00"; } else if(strtolower($continent) == strtolower("Antarctica")){ $backGround = "#15E6E8"; } else if(strtolower($continent) == strtolower("Europe")){ $backGround = "#0074FF"; } else if(strtolower($continent) == strtolower("Australia")){ $backGround = "#05A900"; } else { $backGround = "#FFFFFF"; } if($v->email_status_id == 10){ $statusBackGround = "#a9d18d"; } else if($v->email_status_id == 11){ $statusBackGround = "#ff0000"; } else if($v->email_status_id == 12){ $statusBackGround = "#b3c6e7"; } else if($v->email_status_id == 13){ $statusBackGround = "#c09200"; } else if($v->email_status_id == 14){ $statusBackGround = "#ffff00"; } else { $statusBackGround = "#FFFFFF"; } ?> <tr> <td> {{ date('m-d-Y',strtotime($v->created_date)) }} </td> <td>{{ $v->name }}</td> <td>{{ mb_substr($v->message, 0, 300) }}</td>  <td>{{ $v->contact_origin }}</td> <td style="direction: rtl !important; unicode-bidi: bidi-override; color:black; background-color: {{ $statusBackGround }};">{{ $v->status_name }}</td>  <td>{{ $v->comment }}</td> <td style="color:black; background-color: {{ $backGround }}" >{{ getAllCountryName($v->country) }}</td> </tr> <?php } ?> </tbody> </table> </body> </html>，但也可以将其添加为peerDependency，以便您可以在本地安装它。确保它在webpack配置中为devDependency。这就是你所需要的一切

请参阅https://webpack.js.org/configuration/externals/#object

external

消费时

：

  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',
  }

如何发布React组件而不包括反应

1 个答案: