在浏览器js中使用npm模块

Question

我有一个脚本在 JS 终端运行良好，但我尝试传输到浏览器，但它无法运行。我一直在试图弄清楚如何在浏览器中使用 npm 包，特别是 pythonia，这对于我的程序是必需的。我尝试使用 browserify 进行捆绑，但这不起作用，但我了解到我应该切换到 esbuild，这给了我

✘ [ERROR] Could not resolve "http"

bundle.js:198:23:
  198 │     var http = require("http");

每次我尝试使用包时都会出现该错误（基本上这些包使用了 Node js 预装的模块，如 http，但 require 在浏览器中不起作用）。我还需要使用“child_spawn”，但得到了同样的错误，因为我必须使用 require。我尝试使用 CDN，特别是 jsdeliver。我使用了这段代码：

    <script
type="module"
src="https://cdn.jsdelivr.net/npm/translate@2/index.min.js"
></script>
<script>
    const text = translate("Hello world", "es").then(() => {
        console.log(text);
    });
</script>

但是我收到错误“翻译未定义”，我认为这一定意味着我做错了什么？显然这里存在一些用户错误，但我已经搜索了几天并且一直在兜圈子。在浏览器中包含 npm 模块什么方法最好/我做错了什么？我知道这个问题有很多问题，但我真的不知道该走哪条路。任何帮助将非常感激。谢谢！

Answer 1

这是演示如何在浏览器中使用 npm 模块的代码：

<!-- Include the module using a script tag -->
<script type="module" src="your-script.js"></script>

在你的“your-script.js”文件中：

// Import the npm module using an import statement
import translate from 'translate';

// Use the imported function
const text = await translate("Hello world", "es");
console.log(text);

确保您的模块支持 ES 模块 (

type="module"

)，并且您使用正确的导入语法 (

import

)。另外，请确保您尝试使用的 npm 包与浏览器环境兼容。并非所有 npm 包都设计为在浏览器环境中工作，特别是当它们依赖于 Node.js 特定功能（如“http”或“child_process”）时。如果该软件包没有与浏览器兼容的版本，您可能需要寻找替代方案或考虑以浏览器友好的方式重新实现某些功能。