如何将 node_modules 下的节点安装模块中的模块添加到浏览器？

Question

我基本上是从 React 开始的，我将从本教程https://reactjs.org/docs/hello-world.html和 React 入门指南Z5E056C500A1C4B6A-5110B5ADE5D807/docsaddBadd807开始到网站。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.drafttail.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 文件一起带入浏览器？

Answer 1

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

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

    <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（或您正在使用的任何捆绑器）捆绑的 output 脚本并将其托管在您的站点上。 它可能看起来像

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

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

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

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

如何将 node_modules 下的节点安装模块中的模块添加到浏览器？

问题描述

1 个解决方案

解决方案1
0 2021-12-10 03:27:02

如何将 node_modules 下的节点安装模块中的模块添加到浏览器？

问题描述

1 个解决方案

解决方案1 0 2021-12-10 03:27:02

解决方案1
0 2021-12-10 03:27:02