如何在Vite + React中打包JS脚本

Question

如何在Vite + React中打包JS脚本

3

我有一个使用Vite构建的React应用程序，其中我正在实现一个外部JS脚本。

我在index.html上加载该脚本，在开发过程中它可以正常工作，但是当我将其打包到生产环境时，脚本无法加载。起初，我收到了一个错误，需要在加载脚本时包含type="module"，并且这个错误得到了修复。但是当我访问使用该脚本的应用程序部分时，我会遇到未定义的错误。

该脚本位于/vendors/faceio/fio.js。

<body>
    <!-- <script src="https://cdn.faceio.net/fio.js"></script> -->
    <script type="module" src="/vendors/faceio/fio.js"></script>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
    <script>
        const global = globalThis;
    </script>
    <!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.

        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the <body> tag.

        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

有人能指出如何使这个工作吗？

- Hector Toro

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hrishikesh Pathak · Answer 1

在您的index.html文件中，位于<body></body>标签内部的代码应该如下所示。

 <script src="https://cdn.faceio.net/fio.js"></script>
 <div id="root"></div>
 <script type="module" src="/src/main.jsx"></script>

现在在您的main.jsx文件中，或者您想要初始化faceIO的任何地方，使用一个叫做useEffect()的React Hook。

import { useEffect } from "react";

function App(){
   let faceio;

  useEffect(() => {
    faceio = new faceIO("fioa414d");
  }, []);
}

构建您的vite应用程序，请运行npm run build命令。您可以使用npm run preview命令在部署之前预览构建。

希望这解决了您所有的问题。谢谢。

要了解有关faceIO的更多信息，请访问官方文档页面。

- jonybekov · Answer 2

你可以在你的main.jsx文件中直接导入它。

import "./vendors/faceio/fio.js"

const faceio = new faceIO("fioa414d");