在 html 中使用 react 时如何使用 npm 包？

Question

I am trying to place a react component inside an HTML file and render it accordingly.我试图在HTML文件中放置一个 React 组件并相应地呈现它。 I have a lottie-react component that I have used in my react file but the problem is I don't know how to import the same package using unpkg .我在我的 react 文件中使用了一个lottie-react组件，但问题是我不知道如何使用unpkg导入相同的包。

I have followed the documentation for Add React to Website and had built this code structure for HTML.我遵循了将 React 添加到网站的文档，并为 HTML 构建了此代码结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>React version</title>
</head>
<body>
    <!-- root div for rendering the carousel -->
    <div class="ReactCustom"></div>

    <!-- few scripts for react  -->
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>

    <!-- some of the custom packages used in this project -->
    <script src="https://unpkg.com/lottie-react@2.1.0/build/index.min.js" crossorigin></script>

    <!-- all the js file import -->
    <script type="text/babel" src="Trial.js"></script>

    <script type="text/babel">
        ReactDOM.render(<Trial />, document.querySelector('.ReactCustom'));
    </script>


</body>

</html>

And here is the Trail.js file structure.这是Trail.js文件结构。

function Trial() {
  return (
    <div className="mainContainer">
      <div className="boxStyles">
        <Lottie
        animationData={`./animations/EARBUD.json`}
        loop
        autoPlay
        className={styles.animationStyle}
      />
      </div>
    </div>
  );
}

Doing this, I am getting an error in the console.这样做，我在控制台中收到错误消息。

Error Says:错误说：

babel.min.js:7 Uncaught SyntaxError: https://unpkg.com/browse/lottie-react@2.1.0/build/index.js: Unexpected token (1:1)

Please Help!!请帮忙！！

Thank you!!谢谢！！

More updates:更多更新：

New Errors-新错误-

index.min.js:1 Uncaught ReferenceError: exports is not defined

and和

react-dom.production.min.js:141 ReferenceError: Lottie is not defined

Pic:图片：

Answer 1

The problem is that you are using the wrong url: this points to the browse part of unpkg, useful when you need to see the content of files.问题是您使用了错误的 url：这指向 unpkg 的browse部分，当您需要查看文件内容时很有用。

If you need to use the actual code in order to import it in your html, you need to use the raw that you can access with View Raw button (eg this ).如果您需要使用实际的代码，以便将其导入你的HTML，你需要使用的raw ，可以使用访问View Raw按钮（如本）。

EDIT编辑

Add <script src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js" crossorigin></script> under the import of react and then edit the import of lottie-react with <script type="text/babel" src="https://unpkg.com/lottie-react@2.1.0/build/index.umd.js" crossorigin></script>在react的导入下添加<script src="https://unpkg.com/prop-types@15.7.2/prop-types.min.js" crossorigin></script>然后编辑lottie-react的导入使用<script type="text/babel" src="https://unpkg.com/lottie-react@2.1.0/build/index.umd.js" crossorigin></script>

在 html 中使用 react 时如何使用 npm 包？

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-07-23 10:23:23

在 html 中使用 react 时如何使用 npm 包？

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-07-23 10:23:23

解决方案1
1 已采纳 2021-07-23 10:23:23