В этой статье в основном представлены преимущества и недостатки текущего проектирования переднего плана, а также преимущества и недостатки текущей структуры проектирования процессов.
задний план
С 2009 г.Node.jsЭто также исторический момент для передней части. Поскольку Node.js появляется вместе, есть два больших брата: спецификация Birth CommonJS и механизм управления пакетами NPM. Затем на карантин помещается ряд инструментов для разработки интерфейсов на основе Node.js, основанных на Node.js. В это время в 2013 году передняя часть трех фреймов React.js/angular/vue.js выпустила первую версию. Мы можем развиваться с предыдущей страницы на основе развития одной, на основе одного компонента. После завершения разработки используйте WebPack и другие инструменты для сборки пакетов и опубликуйте результаты сборки в строке с помощью инструмента командной строки, реализованного в node.js. Front-end разработка начала стандартизироваться, стандартизироваться и проектироваться.
Далее разобраны и выделены эти инженерные фреймворки, которые в настоящее время разделены на три модуля: построение задач, упаковка модулей и управление пакетами.
Конструктор задач
Обзор
Task-runners — это инструменты, которые автоматизируют организацию и выполнение задач, используются для выполнения некоторых команд или используют плагины для обработки файлов, таких как сжатие, преобразование, форматирование и т. д. К более традиционным инструментам относятсяgulp,grunt, и npm поставляется сnpm script.
сравнение кадров
| Рамка | Github | Npm(weekly down) |
|---|---|---|
| gulp | Star: 32.4K, Fock: 4.4K, User: 1.6M | 1,434,891 |
| grunt | Star: 12.1K, Fock: 1.5K, User: 889K | 710,405 |
Из приведенной выше таблицы видно, что количество используемых gulp значительно больше, чем у grunt.Gulp внес улучшения на основе сохранения сути grunt и даже может использовать плагины последнего. Gulp постоянно поддерживается специальным персоналом, а grunt не обновлялся более полугода, ниже мы проведем детальное различие между ними.
Grunt
Интерфейсный инструмент автоматизированной сборки, инструмент командной строки на основе nodeJs, это средство запуска задач с множеством мощных плагинов.
Функции:
- Файл слияния (JS/CSS)
- Предварительно скомпилированная обработка less/sass
Этот кадр более старый, и его нынешнее состояние было сфотографировано на пляже.
Gulp
gulpС участиемgruntИнтерфейсные инструменты построения проектов с похожими функциями, хотя оба они являются автоматическими исполнителями задач на основе Nodejs и могут автоматически выполнять слияние, сжатие, проверку, мониторинг файлов, таких как javascript/coffee/sass/less/html/image/ css Такие задачи, как изменение файлов, автоматическое обновление браузера, тестирование и т. д. gulp более эффективны (асинхронная многозадачность), проще в использовании, а плагины отличаются высоким качеством. это лучше, чемgruntГораздо сильнее. Особенности заключаются в следующем:
- Код важнее конфигурации, лучшие практики работы с узлами, оптимизированный набор API и gulp делают работу проще, чем когда-либо.
- Основываясь на мощных потоковых возможностях узла, gulp не сразу записывает файлы на диск во время процесса сборки, тем самым повышая скорость сборки.
- Следуйте строгим правилам, чтобы наши плагины были простыми по структуре и управляемыми.
Практика читов, напрямуюAPIпросто хорошо
Просто написал файл мониторинга, просто для справки, пожалуйста, не жалуйтесь
const watch = require('gulp-watch')
const start = require('./scripts/changeMd')
watch(['packages/*/*.md'], function() {
start()
});
function defaultTask() {
start()
}
exports.default = defaultTask
npm script
Фронт - это то, с чем мы знакомыgulpа такжеgruntрабочий режим. Хоть они и дружелюбны к нашему проекту, но есть и проблемы: требуются плагины, у них свой язык сборки, громоздкий в использовании.
Благодаря вышеизложенному мы можемnpm scriptПлюс пакет инструментов
инструмент для упаковки модулей
Что такое упаковщик модулей? —— Это упаковать несколько модулей в один или несколько файлов, а затем ссылаться на них. Конечно, есть еще одно понятие — модуль es, который на самом деле является понятием режима в скриптах. То есть вы можете ссылаться на локальные js. С их точки зрения, мы в основном решаем проблему области действия.В es5, в дополнение к глобальной области видимости и области действия функции, мы можем разделить код на различные области действия функции. Что сейчас есть у этих больших братьев в мейнстриме, позвольте мне представить их вам по одному (не говоря уже о тех, которые обычно не используются).
| Рамка | Github | Npm(weekly down) |
|---|---|---|
| vite | Star: 3.5K, Fock: 2.5K, User: 85.3K | 409,938 |
| webpack | Star: 60K, Fock: 8.1K, User: 8M | 19,690,682 |
| rollup | Star: 21K, Fock: 1.1K, User: 1.3M | 5,996,992 |
| parcel | Star: 39.7K, Fock: 2K, User: 165K | 79,546 |
| browserify | Star: 13.9K, Fock: 1.2K, User: 376K | 1,844,003 |
Из вышеприведенной таблицы мы видим, чтоwebpackявляется наиболее часто используемым упаковщиком. Vite — самый популярный фреймворк в последнее время. Далее я представлю разницу между этими старшими братьями.
Vite
Vite (по-французски «быстро», произносится как /vit/, произносится так же, как и «veet») — это новый инструмент для разработки интерфейсов, который значительно улучшает процесс разработки интерфейсов. В основном он состоит из двух частей: сервера разработки, который предоставляет множество встроенных функций на основе собственных модулей ES, таких как молниеносно быстрое горячее обновление модуля (HMR); набор инструкций по сборке, который использует Rollup для упаковки вашего кода, И он предварительно настроен для вывода оптимизированных статических ресурсов для производственных сред.
Вышеупомянутое слишком официально: на самом деле, нужно использовать Rollup, а затем использовать модуль ES для его дальнейшей инкапсуляции. Служба узла использует koa. Смотрите, чтобы у последнего обновления был свой сервис.
Давайте посмотрим на его принцип:
-
type=moduleКогда начнется запрос на получение
<scripts type="module" src="./app.js"></scripts>
- Приведите пример файла Vue, как его вызвать в main.js.
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- Внутри
importПакет напрямую сделает запрос на получение
GET http://localhost:3000/@modules/vue.js
GET http://localhost:3000/src/App.vue
С помощью этих хитрых операций Большой Брат может перехватить запрос браузера и просто разложить и затронуть файлы в проекте. В этом процессе vite не упаковывает и не компилирует файлы и работает быстрее, чем webpack.
Конечно, у него есть и некоторые недостатки:
- Браузер разработки проекта должен поддерживать esmodule
- Не распознает синтаксис commonjs
- менее экологичный
В общем, vite проделал большую обработку в сегодняшней среде компиляции, а также без проблем используется в собственной библиотеке. Могу только сказать --- вкусно
Webpack
Начнем с официального: webpack — это сборщик модулей. Его основная цель — упаковать файлы JavaScript вместе для использования в браузере, но он также может преобразовывать, связывать или упаковывать любой ресурс или актив.
"Большой брат" был разработан и выпущен 10 лет назад. Честно говоря, мне очень нравятся "большие братья", которые их поддерживают. Постоянно обновлять новые технологии действительно непросто. Мы можем назвать его твердым братом.
Webpack следит за последними версиями современных технологий и имеет большой рынок.
- Рекурсивно идентифицируйте зависимости по шагу по шагу в соответствии с НПМ, и построить дерево зависимости
- Преобразование кода в абстрактное синтаксическое дерево AST
- Обработать код на этапе AST
- Превратите абстрактное синтаксическое дерево AST в код, который может распознать браузер, а затем выведите
Webpack действительно хорош для больших проектов. В основном он имеет следующие технические особенности: сегментация кода, поддержка загрузчиков, интеллектуальный синтаксический анализ, система подключаемых модулей. Технические возможности полностью задействованы. Например, рекомендуется использовать веб-пакет для сложных сценариев, таких как css, html, а также сложное разделение и слияние кода.
WebPack Defended, WebPack Service с нетерпением захватывает и построит все ваше приложение, начать сервис станет очень медленным.
Rollup
Rollup — это сборщик модулей JavaScript, который компилирует небольшие фрагменты кода в большие сложные фрагменты кода, такие как библиотеки или приложения. Rollup использует новый стандартизированный формат для модулей кода, все из которых включены в версию JavaScript ES6, а не специальные решения прошлого. Модули ES6 позволяют вам свободно и беспрепятственно использовать наиболее полезные отдельные функции из ваших любимых библиотек, при этом ваш проект не должен содержать другой неиспользуемый код.
Официальное заявление немного громоздко, на самом деле роллап — это модульный инструмент упаковки для объединения файлов в проекте. Процесс упаковки не должен беспокоиться о порядке и именованных параметрах. Поддерживает вывод в нескольких форматах:
- amd - AMD
- cjs -CommonJS
- es - ES6 modules
- umd - UMD
- system - SystemJS loader
Вывод некоторых форматов необходимо поддерживать с помощью подключаемого модуля свертки.
Принцип этого воина примерно следующий, в целом он похож на вебпак, но детали сильно отличаются
- Получите содержимое входного файла, упакуйте его в модуль и сгенерируйте абстрактное синтаксическое дерево.
- Анализ зависимостей абстрактного синтаксического дерева входного файла
- Генерируем нужный нам код на основе анализа
- Наконец, напишите в целевой файл
Rollup Prence JS Библиотека, DO ES Conversion, модуль для анализа модуля Parsing можно использовать.
Parcel
Чиновник сказал, что скорость упаковки очень высока, но фактическое измерение действительно намного быстрее, и время может быть удвоено. Для нашей разработки время компиляции можно сильно сократить. Функции фактически те же: модульность, компиляция, сжатие, горячая замена.
В принципе, это почти то же самое
- Начальная конфигурация
- Рекурсивная компиляция
- Построить дерево пакетов
- Генерируем код, который нам нужен
Это в основном то же самое, что и вышеупомянутая структура. Однако нам очень удобно разрабатывать и компилировать, а новичкам просто волшебно.
Browserify
Browserify позволяет вам организовывать код Javascript на стороне браузера таким же образом, как и node require(), и позволяет внешнему Javascript напрямую использовать некоторые библиотеки, установленные Node NPM, путем предварительной компиляции.
Большой брат не обновлялся больше года.Использование такое же, как и у оригинального commonjs.Все операции - командные строки, которые не очень дружат с интерфейсом. Все равно не рекомендую использовать
Есть еще много инструментов для упаковки, и большой брат, который заинтересован, может добавить его, например, fis3, roadhog, create-react-app и т. д., тоже очень хороши.
инструмент управления пакетами
После выпуска node появился и npm, и все использовали инструмент управления пакетами npm. В дальнейшем на npm было запущено множество инструментов, и я снова вас с ними познакомлю.
| Рамка | Github | Npm(weekly down) |
|---|---|---|
| npm | Звезда: 17,3K, Фок: 3,2K, Пользователь: — | 3,769,724 |
| yarn | Star: 40.3K, Fock: 2.8K, User: 89.1K | 2,603,440 |
| cnpm | Star: 3.5K, Fock: 763, User: - | 6,745 |
| pnpm | Star: 14.2K, Fock: 385, User: 1.9K | 411,146 |
| tyarn | Star: 108, Fock: 13, User: - | 981 |
Npm
Это обычно используется всеми, поэтому я не буду много говорить здесь. Честно говоря, npm — одна из главных причин успеха Node.js. npm хранит каждый пакет в собственном репозитории кода, хранит информацию о каждом пакете в своей собственной базе данных, а затем управляет пакетами с помощью команд npm.
Он должен работать следующим образом:
- Получить информацию о пакете удаленно через информацию о конфигурации.
Yarn
- Качайте параллельно, улучшите скорость пакета
- Представлен файл yarn.lock для хранения зависимостей между пакетами.
- Через файл yarn.lock нет необходимости каждый раз вычислять зависимости версий между каждым пакетом, и скорость установки быстрее
Cnpm
Это инструмент, запущенный Taobao. В основном для решения проблемы внутреннего использования npm медленно выпивает и отключается, поэтому я бросил свой собственный источникhttps://registry.npm.taobao.org.说实话并没有解决实质的问题，只是将 npm 的包cope到了国内服务器镜像上。 10分钟的同步对国内的开发者已经很友好了。
Tyarn
Не буду больше об этом говорить, это домашнее зеркало пряжи. Разработано Таобао.
Pnpm
Наконец, давайте поговорим о Big Brother, самом продвинутом инструменте управления пакетами.performant npm, чиновник дал несколько характеристик
- pnpm в 2 раза быстрее, чем альтернативы
- Файлы в Node_modules связаны из одного хранилища с адресацией по содержимому.
- pnpm имеет встроенную поддержку одного хранилища и нескольких пакетов.
- pnpm создал не тайловые node_modules, поэтому код не может получить доступ ни к одному пакету
- Определяем есть ли кеш, если нет то скачиваем в кеш, если есть то переходим к следующему шагу
- Node_Modules Создайте каталог в каталоге
.pnpmИнициализировать структуру - Используйте жесткие ссылки для размещения файлов из кэшированного соответствующего пакета в соответствующий каталог кода пакета.
- Используйте символические ссылки для размещения прямых зависимостей каждого пакета в своем собственном каталоге.
- Node_Modules Используйте символические ссылки в каталоге проекта, поместите напрямую зависимое, это наверх
.pnpmВещи в каталоге node_modules используются напрямую.
Вся ссылка встала. Большой брат - кэшировать загруженный пакет, чтобы его было удобнее использовать в следующий раз. Идея очень авангардная. Все могут попробовать вместе. В настоящее время отечественные байты получили широкое распространение.
Резюме: На этом пока все. Преимущества и недостатки каждого фреймворка анализируются с трех сторон: инструменты построения задач, упаковка модулей и управление пакетами. На более позднем этапе также будут вводиться такие инструменты, как одиночный тест и макет. Обновления интерфейсных технологий становятся все быстрее и быстрее, и я могу не отставать от них. Это немного лучше, чем невежественный новобранец несколько лет назад. Каждый может свободно высказать свое мнение и смиренно его выслушать.