如何在服务器端呈现时禁用或阻止 ReactJS 查找文档？

Question

我正在尝试在我的 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 接管了client) 已下载，使用 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'
      }
    ]
  }
}

Answer 1

尝试在您的配置中添加网络作为您的目标。 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",
}

Answer 2

在我的 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;
}

Answer 3

像这样在 webpackConfig 的插件属性中注入 process.env：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(isDevelopment ? 'development' : 'production'),
      IS_BROWSER: true
    }
  })
]

如何在服务器端呈现时禁用或阻止 ReactJS 查找文档？

How to disable or prevent ReactJS from looking for a document when it server side renders?

javascript

node.js

reactjs

gsap

server-side-rendering