如何从node_modules导入JS库

弗拉德·萨马拉(Vlad Samara)

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

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

如果我像这样将其正确导入HTML文件

<script src="https://unpkg.com/[email protected]/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");

PS为什么在这里不导入工作?Node.js没有导入说明?

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

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

要么

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

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

拉吉·瓦拜·杜比(Raj Vaibhav Dubey)

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

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

这些是一些很棒的文章,可以使您更好地理解这一点:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

开玩笑:如何在node_modules中模拟库?

来自分类Dev

Heroku + Node.js如何克隆node_modules?

来自分类Dev

TypeScript:从node_modules导入外部模块

来自分类Dev

React - 从 Node_Modules 导入文件

来自分类Dev

无法将库从Node_Modules导入ASP.NET CORE APP

来自分类Dev

我无法从 node.js 中的打字稿导入 node_modules

来自分类Dev

Node.js node_modules?

来自分类Dev

打字稿:如何在node_modules中导入和添加嵌套文件的类型?

来自分类Dev

js类语法在node_modules库中不起作用

来自分类Dev

Angular2和TypeScript导入node_modules

来自分类Dev

Babelify在从node_modules导入模块时抛出ParseError

来自分类Dev

使用babel从node_modules导入模块但失败

来自分类Dev

使用 webpack 目标节点从 node_modules 导入 css

来自分类Dev

npm:如何重置node_modules前缀

来自分类Dev

Node.js如何从全局安装的包中查找本地的node_modules文件夹

来自分类Dev

如何修复“模块构建失败(来自./node_modules/postcss-loader/src/index.js)”

来自分类Dev

如何在vue.config.js中为node_modules添加sass加载器

来自分类Dev

在Bluemix中构建Node.js应用程序时,如何覆盖node_modules的默认缓存?

来自分类Dev

node_modules中的节点js MODULE_NOT_FOUND错误

来自分类Dev

覆盖来自node_modules next.js的全局CSS

来自分类Dev

无法从“node_modules/expo/AppEntry.js”解析“../../App”

来自分类Dev

如何从grunt任务在node_modules中运行脚本?

来自分类Dev

如何在Docker构建上缓存node_modules?

来自分类Dev

如何在Symfony的视图中引用node_modules组件

来自分类Dev

如何确保node_modules不包含在包中

来自分类Dev

如何避免node_modules文件夹被删除

来自分类Dev

如何获取“ node_modules”文件夹内容

来自分类Dev

如何告诉 Codeship 忽略 node_modules 文件夹?

来自分类Dev

如何使用 GitHub Pages 在 node_modules 下提供文件?

Related 相关文章

  1. 1

    开玩笑:如何在node_modules中模拟库?

  2. 2

    Heroku + Node.js如何克隆node_modules?

  3. 3

    TypeScript:从node_modules导入外部模块

  4. 4

    React - 从 Node_Modules 导入文件

  5. 5

    无法将库从Node_Modules导入ASP.NET CORE APP

  6. 6

    我无法从 node.js 中的打字稿导入 node_modules

  7. 7

    Node.js node_modules?

  8. 8

    打字稿:如何在node_modules中导入和添加嵌套文件的类型?

  9. 9

    js类语法在node_modules库中不起作用

  10. 10

    Angular2和TypeScript导入node_modules

  11. 11

    Babelify在从node_modules导入模块时抛出ParseError

  12. 12

    使用babel从node_modules导入模块但失败

  13. 13

    使用 webpack 目标节点从 node_modules 导入 css

  14. 14

    npm:如何重置node_modules前缀

  15. 15

    Node.js如何从全局安装的包中查找本地的node_modules文件夹

  16. 16

    如何修复“模块构建失败(来自./node_modules/postcss-loader/src/index.js)”

  17. 17

    如何在vue.config.js中为node_modules添加sass加载器

  18. 18

    在Bluemix中构建Node.js应用程序时,如何覆盖node_modules的默认缓存?

  19. 19

    node_modules中的节点js MODULE_NOT_FOUND错误

  20. 20

    覆盖来自node_modules next.js的全局CSS

  21. 21

    无法从“node_modules/expo/AppEntry.js”解析“../../App”

  22. 22

    如何从grunt任务在node_modules中运行脚本?

  23. 23

    如何在Docker构建上缓存node_modules?

  24. 24

    如何在Symfony的视图中引用node_modules组件

  25. 25

    如何确保node_modules不包含在包中

  26. 26

    如何避免node_modules文件夹被删除

  27. 27

    如何获取“ node_modules”文件夹内容

  28. 28

    如何告诉 Codeship 忽略 node_modules 文件夹?

  29. 29

    如何使用 GitHub Pages 在 node_modules 下提供文件?

热门标签

归档