我使用webpack构建React组件。下面是JSX文件：
// index.js
var React = require('react');
var ReactDOM = require('react-dom');
var renderHelloComponnet = function(id) {
ReactDOM.render(
<h1>Hello, World!</h1>,
document.getElementById(id)
);
}
然后，我想在html中调用函数RenderHelloComponnet我有WebPack的配置文件：
module.exports = {
entry: {
index: './src/index.js'
},
output: {
path: __dirname + '/build',
filename: '[name].bundle.js',
libraryTarget: "var",
library: ["ABC"],
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: { presets:['react'] }
}
]
}
}
但是我不能用HTML呈现我的组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script type="text/javascript" src="./build/index.bundle.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/javascript">
ABC.renderHelloComponnet('example');
</script>
</body>
</html>
我得到错误:typeerror:abc.renderhellocomponnet不是函数
在module.exports中导出的内容就是在libraryvar中获得的内容。因此，如果在index.js中导出RenderHelloComponent:
module.exports = renderHelloComponent;
那么在abcvar中,您将得到以下函数：
<script type="text/javascript">
ABC('example');
</script>
如果您希望Libraryvar实际具有RenderHelloComponent方法，则可以导出具有以下函数的对象：
module.exports = {
renderHelloComponent: renderHelloComponent
}
那么您就可以这样做了：
<script>
ABC.renderHelloComponent('example');
</script>
