如何从 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 文件

如果我将 /node_modules 包中的 konva.js 文件复制到我的 /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*/

或

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

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

Answer 1

Node.js是服务器端的运行环境，你需要的是在client/browser端使用node_modules库。

Using browserify

browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single script tag.

它会将您的需求打包并导入到一个单独的 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 库

How to import JS library from node_modules

javascript

node.js

gulp