Question

能否请您解释一下使用node_modules文件夹中的导入/请求库的思想。

我只想在我的简单项目中使用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文件复制到我的/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");

P.S。为什么在这里不导入工作？ Node.js没有导入说明？

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

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

OR

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

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

Answer 1

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

Using browserify

browserify将递归分析您中的所有require（）调用应用程序以构建捆绑包，您可以在单个脚本标签。

它将捆绑您所需的文件，并导入到一个js文件中，以便在脚本标签中使用。

在客户端使用导入

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

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

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

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

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

如何从node_modules导入JS库

1 个答案: