如何从 node_modules 导入 JS 库答案

【问题标题】：How to import JS library from node_modules如何从 node_modules 导入 JS 库
【发布时间】：2020-05-09 08:21:13
【问题描述】：

您能否解释一下使用 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 包复制到我的/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");

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

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

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

或

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

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

【问题讨论】：

标签： javascript node.js gulp

【解决方案1】：

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

Using browserify

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);
}

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

【讨论】：