Использование CDN vs установка библиотеки NPM

хотя я использую NPM, но я не понимаю, как файлы в node_modules добавляются в мой индекс.html и работа оттуда.

например, если мне нужно использовать jQuery, это так просто. Я получу файл через cdn и добавлю в свой индекс.html файл

СЛУЧАЙ I: CDN 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 


<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('body').css('background','red');
});
</script>
</body> 
</html>

теперь я добавляю не cdns, но теперь я буду включать jQuery NPM. Я создам пакет.файл JSON и затем добавьте jQuery, перейдя в соответствующую папку и введите:

случай II: папка NPM-node_module

теперь я сделал шаги followign:

  1. создал пакет.json by npm init --yes

  2. включен jQuery по npm install jquery --save

теперь папка выглядит так: enter image description here

теперь, как я теперь удалил cdn ссылку jQuery, я не знаю, как будет "файл jQuery" из node_modules будет добавлен в мой индекс.HTML-код?

пожалуйста, кто-нибудь поможет. Понятия не имею ...Я делаю это в браузере!

12
html javascript jquery node.js npm

3 ответов

возможно, я неправильно понял ваш вопрос... Но вы не можете просто добавить эту строку в ?

<script src="node_modules/jquery/dist/jquery.min.js"></script>
3

CDN

используйте CDN, если вы разрабатываете веб-сайт, который будет доступен пользователям интернета.

преимущества CDN:

  • будут обналичены на большинстве браузеров, потому что его используют многие другие веб-сайты

  • уменьшить пропускную способность

Проверьте дополнительные преимущества здесь

NPM

npm-отличный инструмент для управление зависимостями в приложении с помощью модуль bundler.

пример:

предположим, с помощью webpack модуль bundler и jQuery установлен

import $ from 'jQuery'
...
var content = $('#id').html();

но браузер не понимает тег import оператор таким образом, вы должны транспилировать код с помощью команд webpack, bundler проверит все используемые зависимости в привязке их в одном файле без каких-либо проблем с зависимостями.

полезные ссылки : начало работы с webpack

4

Я думаю, вы хотите разместить себя jQuery и использовать его в веб-приложение работает в браузере.

если это так, вам нужно разместить этот файл - сделать его загружаемым через тот же веб-сервер, который вы используете для размещения index.html.

если вы используете Express, вы можете сделать что-то подобное на стороне сервера:

app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));

а затем ссылаться на файл в index.html:

<script src="/jquery/jquery.js"></script>

посмотреть выразите " руководство для сервировки статического файлы.

если вы не используете Express, вам нужно обратиться к руководству по стеку вашего веб-сервера. К сожалению, угадать невозможно - я дал экспресс.пример js, потому что это, вероятно, самый популярный пакет, подобный этому для node.js.

0