react webpack setup - 无法将类作为函数调用

Question

我目前正在为此痛心疾首。我在https://github.com/brettjthom/react-basic-table 制作了一个小反应组件，它使用 webpack 来捆绑它。它适用于自包含的示例，但是一旦我尝试将其导入到另一个项目中，例如https://github.com/brettjthom/react-basic-table-test，它就会失败并出现错误

Cannot call a class as a function

关于我哪里出错了有什么想法吗？

主要组件的Webpack。

var webpack = require('webpack');

// Options for Builds
var buildVar = process.argv.indexOf('-var') > -1;
var minify = process.argv.indexOf('-p') > -1;

// Different build types
var outputName = 'lib/react-basic-table';
outputName = outputName + (buildVar ? '-var' : '');
outputName = outputName + (minify ? '.min.js' : '.js');


var plugins = [
  new webpack.optimize.DedupePlugin()
]
if (minify) plugins.push(new webpack.optimize.UglifyJsPlugin()); 


module.exports = {
  entry: './src/index.jsx',

  module: {
    preLoaders: [
      { test: /\.jsx?$/, include: /src/, loaders: ['eslint?{fix:true}']}
    ],
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: {
        presets: ['react', 'es2015'],
        plugins: ["add-module-exports", "transform-es2015-modules-umd"]
      } }
    ]
  },

  externals: [{
    "react": {
        root: "React",
        commonjs2: "react",
        commonjs: "react",
        amd: "react"
    }
  }],

  output: {
    filename: outputName,
    libraryTarget: buildVar ? 'var' : 'umd',
    library: 'ReactBasicTable'
  },

  plugins: plugins,

  eslint: {
      failOnWarning: false,
      failOnError: true,
      configFile: './.eslintrc.js'
  },

  resolve: {
    extensions: ['', '.jsx', '.js']
  }
};

主要组件的package.json

{
  "name": "react-basic-table",
  "version": "1.0.3",
  "description": "",
  "main": "./lib/react-basic-table.js",
  "dependencies": {
    "react": "^0.13.3",
    "classnames": "^2.1.5",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel": "^5.8.23",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-es2015-modules-umd": "^6.12.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "bootstrap": "^3.3.7",
    "eslint": "~2.11.1",
    "eslint-config-airbnb": "~9.0.1",
    "eslint-import-resolver-webpack": "~0.4.0",
    "eslint-loader": "~1.3.0",
    "eslint-plugin-import": "~1.12.0",
    "eslint-plugin-jsx-a11y": "~1.3.0",
    "eslint-plugin-react": "~5.1.1",
    "webpack": "^1.12.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-all": "node ./node_modules/webpack/bin/webpack.js && node ./node_modules/webpack/bin/webpack.js -p -d && node ./node_modules/webpack/bin/webpack.js -var -p -d && node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js",
    "build": "node ./node_modules/webpack/bin/webpack.js && node ./node_modules/webpack/bin/webpack.js -p -d && node ./node_modules/webpack/bin/webpack.js -var -p -d",
    "watch": "node ./node_modules/webpack/bin/webpack.js --watch",
    "build-example": "node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js",
    "watch-example": "node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js --watch",
    "lint": "eslint --fix ./src/**"
  },
  "author": "Brett Thom",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/brettjthom/react-basic-table.git"
  }
}

示例的 Webpack

var webpack = require('webpack');

var config = {
    entry: './index.jsx',
    output: {filename: 'bundle.js'},
    resolve: {
        extensions: ['', '.js', '.jsx'] 
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loaders: [
                'babel-loader?presets[]=react,presets[]=es2015',
            ]
        }]
    },
    plugins: []
}

module.exports = config;

以 package.json 为例

{
  "name": "test-table",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "build": "node ./node_modules/webpack/bin/webpack.js"
  },
  "devDependencies": {
    "webpack": "~1.13.1",
    "babel-loader": "~6.2.4",
    "babel-preset-react": "~6.5.0",
    "babel-preset-es2015": "~6.9.0",
    "babel-core": "~6.9.1"
  },
  "dependencies": {
    "react": "~15.1.0",
    "react-dom": "~15.1.0",
    "react-basic-table": "^1.0.4"
  },
  "author": "",
  "license": "ISC"
}

谢谢

Answer 1

我有一个类似的问题，我想将 React 组件导入非 React 应用程序。

我所做的是让 webpack 将 React 组件捆绑为一个库。在这种情况下，webpack 配置的输出部分可能如下所示：

output: {
  path: './assets/javascripts/build/',
  filename: 'MyTableComponent.js',
  libraryTarget: 'umd',
  library: 'MyTableComponent',
  umNamedDefine: true
}

组件的入口点包含主 React 组件的类，以及使用 ReactDom 将组件挂载到 DOM 节点的 init() 方法。例如，对于一个虚构的 Table 组件，该 webpack 配置的入口点可能包含如下内容：

import React from 'react'
import ReactDOM from 'react-dom'

class MyTableComponent extends React.Component {

  render() { }

}

// Now the method that will mount this component
function init(container, props) {
  let component = (
    <EmbeddedViewer props={props} />
  )

  ReactDOM.render(component, container)
}

// Just export the init() method
export { init }

最后，当你想使用组件时，调用 init 方法。在这个例子中，我在标签中使用它：

<script type="text/javascript" src="{{ base_url('assets/javascripts/build/MyTableComponent.js') }}"></script>
<script >
  document.addEventListener('DOMContentLoaded', ready, false);

  function ready() {
    var container = document.getElementById('container')
    MyTableComponent.init(container, {})
  }
</script>

更多关于 webpack 输出配置的信息可以在here找到。

祝你好运！

Answer 2

更新

在https://github.com/brettjthom/react-basic-table/blob/master/package.json 第 7 行

"react": "~15.1.0", // from "^0.13.3"

重建库。然后就可以了。

React 0.14+ 的 api 有一些剧烈的变化。