如何在 vanilla Javascript 文件中导入 nodejs 模块

Posted 2023-03-07

【中文标题】如何在 vanilla Javascript 文件中导入 nodejs 模块

【英文标题】：How to import nodejs modules in vanilla Javascript file

【发布时间】：2020-11-10 04:02:22

【问题描述】：

如何在原生 javascript 文件中导入 nodejs 模块？换句话说，如何在 vanilla javascript 文件中使用我的 nodejs 模块进行前端脚本编写？

【参考方案1】：

您可以通过 CDN 包含它们，例如 unpkg 或 cdnjs。它使您可以使用以下 URL 从任何包中轻松加载任何文件： unpkg.com/:package@:version/:file

例如，要在您的页面上获取 d3，您可以像这样添加一个脚本标签：

<script src="https://unpkg.com/d3@5.5.0/dist/d3.min.js" />

More Info

【讨论】：

有趣，我怎么能把我的一个模块变成一个cdn？另外我的意思是将它包含在 vanila javascript 文件中以在前端引用

我找到了如何将nodejs文件制作成cdn，但我不确定如何在脚本标签中访问它。那么我应该用 unpkg.com 代替我的域吗？ :file 是 nodejs 文件本身吗？

只要将任何库发布到 npm，unpkg 就会将其拾取并使用。

@NoobGuy 你想使用哪个包？

@GilsonViana 这取决于模块的设置方式，有些会分配局部变量，有些会附加到 window.PackageName 以允许使用 - 请参阅文档以获取更多信息，或失败然后您可以在浏览器中查看实际脚本，看看是否有帮助。

【参考方案2】：

这些模块是使用名为 npm 的工具打包的。您可以使用模块加载器或捆绑器，如 Browserify 或 Webpack 在前端使用 npm 模块。

这可能对你有帮助

【讨论】：

如果其他选项不起作用，我会尝试将此作为替代解决方案，但似乎有责任。

这是最简单的解决方案，谢谢分享

【参考方案3】：

如果你不想使用CDN，你可以用Node.js创建一个路径，从“node_modules”得到你想要的

在 node.js 中

app.get('/jquery', (req, res) => 
    res.sendFile(path.join(__dirname, 'node_modules/jquery/dist/jquery.min.js'))
)

在html中

<script src="/jquery"></script>

【讨论】：

感谢您的回答，我决定使用browserify。

【参考方案4】：

使用 browserify 构建您的 nodejs 代码，以便前端读取它。