如何从 node_modules 导入 JS 库

Question

您能否解释一下使用 node_modules 文件夹中的 import/require 库的思想。

我只想在我的简单项目中使用konva.js ，使用node.js作为后端并配置了实时服务器扩展。

如果我像这样将它直接导入 HTML 文件

<script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
<script> /*using konva library here or *.js*/</script>

一切正常
据我了解，这个 URL 将整个konva.min.js直接导入到我的 HTML 文件中

如果我将konva.js文件从/node_modules package 复制到我的/src文件夹中

并在我的 HTML 中使用这样的代码

    <script src="konva.min.js"></script>
    <script src="script.js"></script>

我可以访问 script.js 中的 konva 库

在由 node.js 调用的服务器端脚本中，我使用这样的语句来访问 node_modules 中的包

var liveserver = require("live-server");

PS为什么在这里导入不起作用？ Node.js 没有导入说明？

但主要问题是如何在客户端脚本上使用与 require()/import 相同的语法，而不是使用<script>标签来导入库？

 import konva from 'konva';
 /* js code next*/ 

或者

 var konva = require('konva');
 /* js code next*/

我需要使用任务管理器吗？ 我应该怎么办？ 在每个.js文件中搜索依赖项并使用任务将这些依赖项直接导入项目文件夹？ 但是，例如，对于 gulp，我找到了不同的库来格式化代码，但找不到导入依赖项所需的库

Answer 1

Node.js 是一个服务器端运行环境，您需要在客户端/浏览器端使用 node_modules 库。

使用浏览器化

browserify 将递归分析应用程序中的所有 require() 调用，以构建一个捆绑包，您可以在单个脚本标签中将其提供给浏览器。

它将捆绑您需要并导入到单个 js 文件中以在脚本标记中使用。

在客户端使用导入

<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

你所需要的只是脚本元素上的 type=module，浏览器会将内联或外部脚本视为 ECMAScript 模块

// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

这些是一些很棒的文章，可以更好地理解这一点：

• 浏览器中的 ECMAScript 模块
• 深入了解 ES6 模块