如何將 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