Webpack对窗口中全局变量的反应库
我使用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不是函数
共有1个答案
在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>
-
问题内容： 大家好，我还是新手，我不知道如何使用全局变量。我想将“ this.props.topic.text”设置为全局变量，以在项目的其他应用程序上使用它。我怎样才能做到这一点 ？ 问题答案： 这是一个可怕的想法，但是在React中使用全局变量的最好/最简单的方法是将其放在上。在组件中，您可以执行类似的操作，然后通过其他任何地方进行访问。 理想情况下，如果您有数据，并且在可能的状态下，需要在各
-
问题内容： 是否可以使用webpack定义全局变量以产生如下所示的结果： 我看到的所有示例都使用外部文件 问题答案： 有几种方法可以处理全局变量： 1）将变量放入模块中。 Webpack仅对模块进行一次评估，因此您的实例保持全局状态，并在模块之间进行更改。 因此，如果您创建像a之类的东西并导出所有全局变量的对象，则可以读取/写入这些全局变量。您可以导入一个模块，从功能中对对象进行更改，然后导入另一
-
本文向大家介绍Lua中的全局变量、非全局变量总结，包括了Lua中的全局变量、非全局变量总结的使用技巧和注意事项，需要的朋友参考一下 前言 Lua将其所有的全局变量保存在一个常规的table中，这个table称为“环境”。这种组织结构的优点在于，其一，不需要再为全局变量创造一种新的数据结构，因此简化了Lua的内部实现；另一个优点是，可以像其他table一样操作这个table。为了便于实施这种操作，L
-
问题内容： 如何在Java中定义全局变量？ 问题答案： 要定义全局变量，你可以使用静态关键字 现在你可以通过调用从任何地方访问a和b
-
我想使用大小为2的FIFO队列来存储数据流的元素。在任何情况下，我都需要流中的前一个元素，而不是当前元素。为此，我在流代码之外创建了一个队列，并将当前元素加入队列。当我的队列有两个元素时，我将其出列并使用第一个元素。 我面临的问题是，我不能加入队列，因为它是在我的流代码之外声明的。我想这是因为流使用多个JVM，我的队列将在一个JVM中声明。 下面是一个示例代码： 在这里，没有任何东西进入队列，队列
-
问题内容： 假设我想创建一个sql脚本并执行以下操作： 我不能，因为@SomeVariable与他所属的批次一起死亡，而myProcedure需要它自己的批次。显然，我可以创建一个#temp表并在其中填充所需的任何值，但随后我必须从中选择- 添加代码，尽管琐碎，但会损害可读性，并且当我需要的只是一个全局变量时似乎很愚蠢。有没有更好的办法？ 要痛苦地清除。我知道SQL Server具有称为“表”的“