无法读取未定义的属性“组件” - 反应组件插件的 webpack 构建

Question

我正在为我的传单插件 leaflet-arrowheads 构建一个 react-leaflet 包装器。它是我希望人们能够作为 npm 包安装、导入和使用的组件。组件很简单：

import React from 'react'
import { Polyline } from 'react-leaflet'
import 'leaflet-arrowheads'

class ArrowheadsPolyline extends React.Component{

   componentDidMount(){
      const polyline = this.polylineRef.leafletElement
      if (this.props.arrowheads){
         polyline.arrowheads(this.props.arrowheads)
         polyline._update()
      }
   }

   render(){
      return(
         <Polyline {...this.props} ref={polylineRef => this.polylineRef = polylineRef} />
      )
   }

}

export default ArrowheadsPolyline

直接在项目中使用此组件时它可以工作（当然假设您安装了所有相同的依赖项）。我正在尝试使用 webpack 构建它并发布到 npm，以便任何人都可以执行 import { Polyline } from 'react-leaflet-arrowheads' 并以这种方式使用组件。我的 webpack.config 如下所示：

var path = require('path')

module.exports = {
    entry: "./src/react-leaflet-arrowheads.js",
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "react-leaflet-arrowheads.js",
        library: "ReactLeafletArrowheads"
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            }
        ]
    },
    externals: {
        'react': {
            commonjs: 'react',
            commonjs2: 'react',
            root: 'React'
        },
        'react-dom': 'commonjs react-dom',
        'leaflet': {
            commonks: 'leaflet',
            commonjs2: 'leaflet',
            root: 'L'
        },
        'react-leaflet': {
            commonjs: 'react-leaflet',
            commonjs2: 'react-leaflet',
            Root: 'ReactLeaflet'
        }
    }
}

我的 package.json 看起来像这样：

{
  "name": "react-leaflet-arrowheads",
  "version": "1.0.0",
  "description": "A react-leaflet wrapper for leaflet-arrowheads",
  "main": "build/react-leaflet-arrowheads.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack"
  },
  "keywords": [
    "leaflet",
    "react",
    "react-leaflet",
    "arrowheads"
  ],
  "author": "Seth Lutske",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "leaflet-arrowheads": "^1.0.11",
    "webpack": "^4.41.5"
  },
  "peerDependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-leaflet": "^2.6.1",
    "leaflet": "^1.6.0"
  }
}

然后我当然有我的 .babelrc，它有我的 babel 预设和插件来正确编译 jsx 和什么不是。它编译没有问题。我做了一个npm link，然后将它链接到另一个项目来测试它。在另一个项目中，我有import { Polyline } from 'react-leaflet-arrowheads'。但我收到错误消息TypeError: Cannot read property 'Component' of undefined。很明显，我的 webpack 构建和处理 React 的方式有问题。但我不确定是什么。在 webpack.config 中将 React（和朋友）设为 external 是否不正确？或者作为 package.json 中的peerDependency？这个包被导入的项目已经并且应该总是已经将 react 作为依赖项。使用 webpack 构建成为依赖项的插件，但有自己的依赖项，我仍然在学习其中的微妙之处。感谢阅读。

Answer 1

我正在投掷飞镖，看看是否有土地......

webpack 文档指出，要创建一个可用作 ES5 导入和 commonJs 要求的库，您需要将 libraryTarget: 'umd' 添加到 output 对象。老实说，我不能说没有它就不允许import，但它确实说，如果没有定义 libraryTarget，它默认为'var'，这显然会创建一个var，并将默认导出结果分配给它。

https://webpack.js.org/guides/author-libraries/#expose-the-library

我还注意到 webpack 中不包含 babel-transform-react-jsx 插件，但我不知道这是否会成为问题。