反應webpack設置 - 不能調用一個類作爲功能

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

更新

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

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

重新構建庫。然後它工作。

React 0.14+在api中有一些劇烈的變化。

Answer 2

我有一個類似的問題，我想將React組件導入到非React應用程序中。

我所做的就是讓webpack將React組件捆綁爲一個庫。在這種情況下的WebPack配置的輸出部分可以是這樣的：

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

的入口點的組分包含類爲主要陣營成分，以及使用ReactDom一個init（）方法來安裝部件到一個DOM節點。因此，例如，一個假想的表組件，切入點是的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方法。在這個例子中，我用它標記中：對的WebPack輸出配置

<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> 

更多信息，可以發現here。

祝你好運！