我使用 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 中导出的内容就是您在 library var 中获得的内容。因此，如果在 index.js 中导出 renderHelloComponent:
module.exports = renderHelloComponent;
然后在您的 ABC 变量中您将获得以下函数:
<script type="text/javascript">
ABC('example');
</script>
如果您希望您的library var 实际上具有renderHelloComponent 方法，您可以导出一个包含此函数的对象:
module.exports = {
renderHelloComponent: renderHelloComponent
}
然后您将能够执行以下操作:
<script>
ABC.renderHelloComponent('example');
</script>
关于reactjs - Webpack React 库到窗口中的全局变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35078504/