Question

我有一个可在浏览器中运行的React应用。该应用程序包含对外部库的依赖（我项目中的旧库以旧式JS方式编写）。我通过脚本标签包含了此文件。

现在，我决定在服务器端渲染我的React应用。注入该库的正确位置是什么？

这是我的index.html的样子（lib.js是具有此外部lib的文件，而compiled.js是具有通过webpack编译的代码的文件）：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div id="container"></div>
<script src="/lib.js"></script>
<script src="/compiled.js" charset="utf-8"></script>
</body>
</html>

现在的问题是我必须为lib.js中的所有对象创建模拟，例如，我的server.js文件如下所示：

require("@babel/register")({
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    ["babel-plugin-inline-import", {
      "extensions": [
        ".svg",
        ".png",
        ".jpg",
        ".mp4",
      ]
    }]
  ]
});

if (typeof mySuperLib === 'undefined') {
  global.mySuperLib = {

  };
}

require('./server');

如果我不包含此模拟，则表示生成错误：ReferenceError：未定义mySuperLib

但是我的问题更深了-组件的呈现取决于“ mySuperLib” lib返回的实际值。我有一些像这样的组件：

class MyPage extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        return (
            <div className="my-page">
               {mySuperLib.needMoreContent()?'Some long content here':'Some short content here'}
            </div>
        );
    }
}

export default MyPage;

是否有任何方法可以从服务器返回的HTML中呈现页面的初始版本，从而可以理解应用程序正在浏览器中运行并通过调用真实的“ mySuperLib”来重新呈现此组件。 / p>

这里的方法是否正确，或者还有其他方法可以将这些库添加到构建中？

React Server渲染和外部库

0 个答案: