Простая комплектация / продажа пакетов NPM?

Question

Отказ от ответственности: я в основном бэкэнд-разработчик, не обладающий обширными знаниями FE.

Я пишу веб-приложение Golang, не относящееся к SPA, которое генерирует HTML, который затем отправляется пользователю.Поскольку я хотел бы обновлять и отслеживать свои зависимости Javascript / CSS лучше, я хочу переключиться на использование NPM с файлом package.json вместо ручной загрузки и добавления библиотек CSS и Javascript.Это типичные jquery, bootstrap и fontawesome.В дополнение к этому у меня есть один файл Javascript для каждой страницы для интерактивного контента.

например

+ js
  lib.js    -> jquery, bootstrap, fontawesome
  - home    -> specific JS
  - account -> specific JS
  ...
+ css
  theme.css
  custom.css

Однако я не вижу простого решения для npm install и экспорта установленных пакетовв vendor.js файл, минимизированный.Iv'e посмотрел на webpack ( go-webpack ), но это ужасно сложный процесс с сотрясением, связыванием и мерцанием всего дерева.Кроме того, webpack ожидает, что вы будете запускать сервер разработки при локальном обслуживании ресурсов, выполнять некоторые операции с чанками и по-прежнему ссылаться на глобальные библиотеки в каждом файле JS.(чтобы не трясти дерево)

Есть ли более простой способ перейти от файла package.json к минимизированному, объединенному набору активов?

Answer 1

TLDR : 'Вы не можете видеть лес за деревьями' - просто получите минимальную конфигурацию webpack.config.js, работающую, прежде чем углубляться в более сложные детали, такие как деревовстряхивание, чанкинг и т. д. *

Вам необходимо использовать пакет, например Webpack или Parcel , чтобы объединить все свои активы JavaScript в одинJavaScript файл.Я думаю, вы пытаетесь сделать слишком много, чтобы начать с:

• webpack-dev-server
• Tree Shaking
• Chunking

Поскольку это более продвинутые концепции ... Возможно, вы могли бы начать с первоначального создания одного JavaScript пакета (или пакета на странице) для использования вашим приложением .Это не будет так сложно и потребует точки входа в следующие файлы в вашем приложении:

1. Индекс JavaScript приложения (Это должно загрузить JavaScript, используемый вашим приложением)
2. CSS указатель.(В идеале у вас есть корневой файл стилей, который загружает другие файлы стилей приложений)

Теперь настройте соответствующие загрузчики и плагины для ресурсов вашего приложения, такие как MiniCssExtractPlugin, file-loader,и т. д., для загрузки и обработки активов ваших приложений.Как только все заработает, просто прикрепите этот сгенерированный пакет в тег <script> на корневой странице html index, вместо первоначальной настройки webpack-dev-server.Это позволит вашему приложению использовать пакетный файл JavaScript без необходимости конфигурировать webpack-dev-server.. Для создания новых пакетов создайте пользовательские команды в разделе scripts вашего файла package.json, что-то вроде:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p --progress --config webpack.config.js",
    "dev-build": "webpack --progress -d --config webpack.config.js",
    "watch": "webpack --progress -d --config webpack.config.js --watch"
  },

Только после того, как все заработает, вы должны беспокоиться о более продвинутом приросте производительности , например: chunking / treeshaking / etc ... Посмотрите на следующие учебные пособия, которые могут помочь: Введение в Webpack и Full Stack Web-приложение .Обратите внимание, что второй урок немного устарел, так как теперь defacto будет использовать create-react-app cli вместо того, чтобы самостоятельно настраивать конфигурации сборки для проекта react, НО принципы здравы и показывают, как действоватьнастройка собственной конфигурации сборки.

Надеюсь, это поможет!