Создание многостраничного инженерного проекта без зависимостей

задняя часть внешний интерфейс Vue.js Webpack

Золотая арка в последнее время довольно популярна, давайте сначала ее откроемОфициальный сайтпосмотри.

После прочтения, если ваш начальник попросит вас сделать такой сайт, он должен быть seo и совместимым с IE, как бы вы это сделали?

Используйте vue/react, одностраничные приложения не подходят для поисковой оптимизации, а совместимость с IE оставляет желать лучшего. Переход к среднему слою узла для выполнения рендеринга на стороне сервера усложняет задачу. Это можно сделать только с помощью JQuery, но как сделать инженерию? Это тоже не кажется легким. Поскольку большинство текущих инженерных решений представляют собой набор сегментов семейства одностраничных приложений, таких как шаблон веб-пакета vue-cli.

И на этом этапе с фронтенда, если вы позволите всем взяться за неразработанный проект, вы, должно быть, очень конфликтуете. Представьте себе такой проект, вручную связывающий ресурсы, не могу писать меньше/дерзко, не могу писать ES6, не могу полагаться на управление, не могу компилировать и упаковывать... Боже мой, я даже не могу думать об этом. Это. Однако в реальном бизнесе с инжинирингом не все так гладко, как все себе представляют. Например, официальный сайт Золотой Арки сейчас имеет много страниц и требует SEO-совместимости и IE. И при столкновении с этими проектами часто возникают такие проблемы:

  1. Поскольку страница обрабатывается серверной частью, на ней необходимо развертывать внутренние программы (php, java и т. д.), а различные конфигурации среды довольно проблематичны.
  2. Интерфейсный HTML-код зависит от серверной части, что затрудняет соединение интерфейсных и внутренних проектов при разработке внешнего интерфейса.

Другими словами, нам нужно сделать инженерный проект, который не является одностраничным приложением. Когда этот проект находится в сети, передняя и задняя части связаны, но во время разработки мы не хотим связывать переднюю и заднюю часть. Для реорганизации нам необходимо решить следующие проблемы:

  1. Front-end и back-end разделены, и разработка front-end не может зависеть от back-end среды.
  2. Фронтенд инжиниринг. Такие как упаковка и компиляция статических ресурсов, управление зависимостями, компонентизация и т. д.

Как только мы определили проблему, которую нужно решить, мы можем начать. Мы можем использовать webpack для создания проекта, который поможет нам выполнить некоторые инженерные работы, такие как упаковка, компиляция и обработка файлов. Настраивать веб-пакет с нуля сложно, мы можем изменить колесо, например, поставитьvue-cliИзмените шаблон веб-пакета, удалите ненужный vue-loader и добавьте в него многостраничную запись.

изменить колесо

Шаг 1: понятьvuejs-templates/webpack 

npm install -g vue-cli

vue init webpack my-project

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

Шаг 2: удалить

Поскольку нам не нужно использовать vue, нам не нужна логика, связанная с обработкой файла vue. Из того, что мы только что узнали об этом шаблоне, мы знаем,vue-loaderа такжеvue-style-loaderне требуется. Так что просто удалите соответствующий код и пакет в package.json.

Более того,vue-style-loaderХотя и не требуется,style-loaderОн по-прежнему нужен, поэтому первое нужно заменить вторым.

Шаг 3: Добавьте

Вычитание легко, а сложение не так просто. Согласно нашим потребностям прямо сейчас, мы должны добавить к нему многостраничную запись. В Интернете есть много руководств по настройке нескольких входов в webpack. Однако они могут не соответствовать нашим потребностям. Как правило, они имеют следующие проблемы:

  1. Входной файл должен быть настроен самостоятельно. В проекте с большим количеством страниц файл ввода должен автоматически считываться из согласованного каталога, что больше соответствует соглашению, чем конфигурации.
  2. Мультивход для js. Поскольку в отрасли обычно используются одностраничные приложения, а страницы создаются с помощью js, для нескольких страниц требуется только несколько записей js, и нет необходимости напрямую писать html. И мое требование - нет, я хочу многократную запись для html-файлов.

Но когда мы решим две вышеупомянутые проблемы, у нас появится новая проблема. Наши разные html-файлы на самом деле имеют общие части. Например, есть верхние и нижние колонтитулы. То есть нам нужно добавить в эти html файлы шаблон. Мы можем добиться этого с помощью загрузчика webpack, но нет готового загрузчика, чтобы решить эту проблему лучше. тогда что нам делать? Вы можете обратиться к другой моей статье.Напишите свой собственный загрузчик Webpack.

Управление версиями статических ресурсов

После того, как вышеуказанная проблема решена, наша работа не завершена. Теперь статические ресурсы этого проекта контролируются файлами HASHH. К сожалению, статические ресурсы некоторых проектов требуют обновления управления временем Timestamp. Хотя это не очень хорошее решение, некоторые проекты все еще делают. Нет, чтобы вместить их, мы должны удалить хеш. Но в этом случае, когда мы хотим обновить фотографии, указанные в CSS, нет возможности, потому что бэкэнда картинок в цепочке CSS не может контролировать версию.

Как это решить?感谢webpack，我们可以通过如下的配置来实现：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  oneOf: [
    {
      issuer: /\.html$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[ext]',)
      }
    },
    {
      issuer: /\.(css|less)$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }
  ]
}

Это означает, что если на изображение есть ссылка в html, значение хеша не будет добавлено, а если оно будет введено в файле css, оно будет добавлено.

завершенный

Это завершает простую архитектуру проекта. Это может помочь нам реализовать функции упаковки, компиляции и управления шаблонами html. Наконец, веб-страницу с html + статическими ресурсами можно создать и опубликовать непосредственно в CDN. Конечно, также можно бросить их прямо в заднюю часть.

Однако эта полка не очень совершенна, а сценарии применения ограничены, что больше подходит для некоторыхМеньше взаимодействия, больше страниц, ценность SEO или традиционных внутренних страницвеб-сайт. Кроме того, поскольку очень важны компонентизация и тестирование в разработке, поскольку нет введения какой-либо структуры, пользователям необходимо изучить этот момент самостоятельно.

Кроме того, если вы все еще хотите использовать vue, react или angular и не хотите заниматься их рендерингом на стороне сервера, вы можете попробоватьЗамаскированная система рендеринга на стороне сервера.

Наконец, если эта полка вам пригодится, пожалуйста, откройте ее.github.

--читать оригинал--Пожалуйста, получите мое разрешение перед перепечаткой-Сиреневый сад F2E @сян старший.

Категории