Как использовать node_modules на «традиционном сайте»? - PullRequest
Новая
       44

Как использовать node_modules на «традиционном сайте»?

0 голосов
/ 30 января 2019

Я использовал узел для управления зависимостями от приложений React и т. П., В тех, которые вы используете package.json, чтобы отслеживать библиотеки и использовать их в своих скриптах, используя синтаксис модуля импорта ES6.

Но теперь яЯ работаю над устаревшей базой кода, которая использует несколько плагинов jQuery (загруженных вручную и помещенных в папку "libs") и связывает их непосредственно в разметке с помощью тегов сценария.

Я хочу использовать npm дляуправлять этими зависимостями.Это мой единственный вариант:

  • запустить npm init
  • установить все плагины через npm и поместить их в package.json

  • ссылка на скрипты вПапка node_modules прямо из разметки:

    <script src="./node_modules/lodash/lodash.js"></script>

или есть лучший способ?

Ответы [ 3 ]

0 голосов
/ 30 января 2019

Рекомендую Посылка js .

Тогда вам нужно только:

  1. Выполнить npm init
  2. Установить зависимость, например npm install jquery
  3. Импорт с синтаксисом ES6: import $ from "jquery";

И беги с посылкой

0 голосов
/ 30 января 2019

Ознакомьтесь с этим учебным пособием , чтобы перейти от использования тегов сценария к связыванию с Webpack.Вам нужно будет сделать следующее: (выполните шаги 1 и 2, как вы упомянули в своем вопросе, тогда ваш шаг 3 изменится на следующие 3 шага)

  1. Загрузить веб-пакет сnpm: npm install webpack --save-dev

  2. Создайте файл webpack.config.js с указанием вашего входного файла и выходного файла.Ваш входной файл будет содержать любые пользовательские компоненты JS, используемые вашим приложением. Вам также потребуется указать, чтобы включить ваши node_modules в ваш сгенерированный комплект Javascript.Ваш выходной файл будет результирующим пакетом Javascript , который Webpack создаст для вас, и он будет содержать весь необходимый Javascript, необходимый вашему приложению для запуска.Простой пример webpack.config.js будет выглядеть следующим образом:

    const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' }, resolve: { alias: { 'node_modules': path.join(__dirname, 'node_modules'), } } };

  3. Наконец, добавьте тег <script> на главной HTML-странице, указывающий на вновь созданный файл.Комплект Javascript: 

    `<script src="dist/my-first-webpack.bundle.js"></script>`

Теперь ваше веб-приложение должно работать так же, как и до вашего путешествия по рефакторингу.

Приветствия

0 голосов
/ 30 января 2019

Вам нужно будет настроить Webpack или что-то подобное.

https://webpack.js.org/configuration/resolve/

...