在服务器端呈现文档时，如何禁用或防止ReactJS查找文档？
在服务器端呈现文档时，如何禁用或防止ReactJS查找文档？
提问于 2016-02-02 11:29:01
我正试图在我的ReactJS应用程序中使用GSAP，用于客户端的动画。如果我通过npm安装gsap模块，然后尝试在我的模块中使用gsap，则会得到以下错误：
node_modules/gsap/src/uncompressed/TweenMax.js:2535
_doc = document,
^
ReferenceError: document is not defined
at Function.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:2535:11)
at [object Object].check (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5794:61)
at new Definition (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5811:10)
at window._gsDefine (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:5816:12)
at Array.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:2489:11)
at /Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:7570:9
at Object.<anonymous> (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/gsap/src/uncompressed/TweenMax.js:7581:3)
at Module._compile (module.js:435:26)
at Module._extensions..js (module.js:442:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/gcardella/Documents/TOG/SOLID/mockups/solid-website/node_modules/babel-register/lib/node.js:138:7)在ReactJS中是否有一种编码方法:如果它在服务器上呈现，就没有文档，所以不要加载gsap，但是一旦下载了编译好的bundle.js (我的客户端对接管客户机的js的反应)，就使用gsap，因为文档存在吗？
我目前使用的工作是将gsap嵌入到index.ejs中：
<!DOCTYPE html>
<html>
<head>
<title>Solid Website</title>
</head>
<body>
<section id="react-app" class="container-fluid">
<%- markup %>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TimelineMax.min.js"></script>
<script src="build.js"></script>
</body>
</html>更新: webpack.config.js
var path = require('path');
module.exports = {
entry: path.join(process.cwd(), 'client-render.js'),
output: {
path: './public/',
filename: 'build.js'
},
module: {
loaders: [
{
loader: 'babel'
}
]
}
}回答 3
Stack Overflow用户
回答已采纳
发布于 2016-02-02 15:49:33
在我的webpack.config.js：
module.exports = {
entry: path.join(process.cwd(), 'client/client-render.js'),
output: {
path: './public/',
filename: 'build.js'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel'
}
]
},
/* this is new */
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
APP_ENV: JSON.stringify('browser')
}
})
]
}然后在我的模块中：
if (process.env.APP_ENV === 'browser') {
load_the_module_for_browser;
}Stack Overflow用户
发布于 2016-02-02 14:56:23
尝试在配置中添加web作为目标。https://webpack.github.io/docs/configuration.html#target，它应该是默认的。
var path = require('path');
module.exports = {
entry: path.join(process.cwd(), 'client-render.js'),
output: {
path: './public/',
filename: 'build.js'
},
module: {
loaders: [
{
loader: 'babel'
}
]
},
target: "web",
}Stack Overflow用户
发布于 2016-02-04 14:26:22
将process.env注入webpackConfig的插件属性中，如下所示：
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(isDevelopment ? 'development' : 'production'),
IS_BROWSER: true
}
})
]页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35152210
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号