admin 管理员组

文章数量: 1086019

Can you please explain the ideology of using import/require libraries from node_modules folder.

I just want to use konva.js in my simple project, using node.js as a back end with live-server extension configured.

If I import it right into HTML file like this

<script src="/[email protected]/konva.min.js"></script>
<script> /*using konva library here or *.js*/</script>

Everything works
As I understood, this URL imports whole konva.min.js right into my HTML file

If I copy konva.js file from /node_modules package into my /src folder

And use code like this in my HTML

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

I have access to konva library in script.js

In server-side scripts, invoked by node.js I used statement like this to access packages in node_modules

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

P.S. Why doesn't import work here? Node.js doesn't have import instructions?

But the main question is how to use the same syntax of require()/ import on client-side scripts and not to use <script> tags to import libraries?

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

OR

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

I need to use task managers? What should I do? Search for dependencies in each .js file and use tasks to import these dependencies right into project folder? But, for example, for gulp I found different libraries to format code, but can't find needed one to import dependencies

Can you please explain the ideology of using import/require libraries from node_modules folder.

I just want to use konva.js in my simple project, using node.js as a back end with live-server extension configured.

If I import it right into HTML file like this

<script src="https://unpkg./[email protected]/konva.min.js"></script>
<script> /*using konva library here or *.js*/</script>

Everything works
As I understood, this URL imports whole konva.min.js right into my HTML file

If I copy konva.js file from /node_modules package into my /src folder

And use code like this in my HTML

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

I have access to konva library in script.js

In server-side scripts, invoked by node.js I used statement like this to access packages in node_modules

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

P.S. Why doesn't import work here? Node.js doesn't have import instructions?

But the main question is how to use the same syntax of require()/ import on client-side scripts and not to use <script> tags to import libraries?

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

OR

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

I need to use task managers? What should I do? Search for dependencies in each .js file and use tasks to import these dependencies right into project folder? But, for example, for gulp I found different libraries to format code, but can't find needed one to import dependencies

  • javascript
  • node.js
  • gulp
Share Improve this question edited May 13, 2020 at 17:46 Jens 5,8775 gold badges55 silver badges70 bronze badges asked May 9, 2020 at 8:21 Vlad SamaraVlad Samara 471 gold badge1 silver badge5 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

Node.js is a server-side runtime environment, what you need is to use the node_modules libraries on the client/browser side.

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.

It will bundle you require and import into a single js file for use in a script tag.

Using import on client side

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

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

All you need is type=module on the script element, and the browser will treat the inline or external script as an ECMAScript module

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

These are some great articles to get a better understanding of this :

  • ECMAScript modules in browsers
  • ES6 Modules in depth

本文标签： javascriptHow to import JS library from nodemodulesStack Overflow

版权声明：本文标题：javascript - How to import JS library from node_modules - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744090441a2531933.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。