0

我基本上是从 React 开始的，我正在学习本教程https://reactjs.org/docs/hello-world.html和 React 入门指南https://reactjs.org/docs/add-react- to-a-website.html。

我的模板现在看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="root"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
       ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root')
); 
    </script>
  </body>
</html>

这可行，但我想尝试的一些软件包没有 CDN 可以从中加载它们。特别是 https://www.daftail.org/docs/getting-started。

npm init -y我是否必须接下来使用然后设置节点环境npm install --save draftail draft-js@0.10.5 react react-dom？但是我已经通过 CDN 进行了 react install，所以我现在应该做什么，因为我不知道这些包是否会发生冲突。

此时如何将 node_modules 中安装的内容与 CSS 文件一起带入浏览器？

4

1 回答 1

0

如果包不以可供浏览器立即使用的格式存在，正确的方法是从 Node 构建您的应用程序，以便您可以导入包并使用它。

您必须删除所有这些脚本标签：

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
       ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root')
); 
    </script>

相反，一旦你的 Node 项目设置好了，就可以使用 Webpack（或你正在使用的任何捆绑器）的捆绑输出脚本并将其托管在你的站点上。它可能看起来像

<script src="bundle.js"></script>

过渡到基于节点的项目还有其他好处：

  • 所有的转译工作现在将在服务器上为每个构建完成一次，而不是每次客户端加载页面时
  • 轻松设置构建过程以自动缩小发送到客户端的代码，从而降低带宽需求
  • 您也可以轻松地要求 polyfill

请注意，create-react-app是 React 项目的一个很好的起始样板 - 只需安装它，您就不必真正搞乱大部分设置，您将能够开始编写您想要的代码.

于 2021-12-10T03:27:02.953 回答