构建/编译/部署 ReactJS 到生产的最佳方法

IT技术 reactjs react-jsx jsx
2021-04-10 01:24:00

我是 reactJS 的新手,正在尝试了解将代码部署到生产环境的最佳方式是什么。根据下面的链接,我正在使用 babel 作为下面的代码进行构建,但我想知道这是否很好,或者是否有其他关于将 ReactJS 部署到生产的最佳实践

npm init -y
npm install --save-dev babel-cli
npm install --save-dev babel-preset-es2015 babel-preset-react

babel --presets es2015,react --watch src/ --out-dir dist

http://www.sitepoint.com/getting-started-react-jsx/

这是我的 index.html 和 main.js 文件:

索引.html

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Resources prototype</title>
    <!-- React / Babel / Jquery Libraries -->
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
    <script src="jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="main.js"></script>

  </body>
</html>

主文件

var First = React.createClass({
  render: function() {
    return (
      <div className="First">
        Hello, world!
      </div>
    );
  }
});
ReactDOM.render(
  <First />,
  document.getElementById('content')
);
1个回答

我推荐使用Webpack来打包你的代码。它会将您的整个应用程序合并到一个文件中(如果您进一步优化 webpack,则可以将其合并到几个文件中)。然后,您可以拥有一个非常基本的 index.html 文件,该文件只需加载捆绑的 js 文件。以您喜欢的任何方式将其推送到您的生产服务器。

这是一个很好的教程,可以让你开始使用 Webpack:使用 Webpack 和 Babel 为 ES6 设置 React(如果你不喜欢这个,这里有很多)

React 当前的挑战之一是大于最佳的包大小。对于复杂的应用程序,这可能会成为初始页面加载的问题。进入同构渲染React 可以在服务器端运行并呈现快速下载的应用程序快照。然后,当您的实际应用程序包下载时,它会无缝地接收当前的 DOM,从而在它们到达您的页面时提供更加快速的用户体验。

这是使用 React 进行同构渲染的示例:Github 上的示例

去谷歌扔“ReactJS同构渲染”以获取更多信息。
祝你好运,玩得开心 - 这是很酷的东西:)