我目前对此不以为然。我在这里使用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"
}
谢谢
更新
在https://github.com/brettjthom/react-basic-table/blob/master/package.json第7行
"react": "~15.1.0", // from "^0.13.3"
重新构建库。然后就可以了。
React 0.14+在api方面有很大的变化。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句