IT技术 - 无法读取未定义的属性“组件”-react 组件插件的 webpack 构建 - 吾爱随笔录

我正在为我的传单插件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 的方式有问题。但我不确定是什么。external在 webpack.config 中将React（和朋友）设置为 an 是不正确的吗？或者作为peerDependency在 package.json 中？这个包被导入的项目已经有并且应该已经有作为依赖的react。使用 webpack 构建成为依赖项但有自己依赖项的插件，这仍然是我正在学习的精妙之处。谢谢阅读。