1 Обзор
Parcelда2017Он был выпущен вWebpackОн слишком громоздкий в использовании, а документация на официальном сайте не очень понятная.ParcelКак только он был запущен, он был быстро выдвинут на передний план. Его основная особенность заключается в том, что он не имеет абсолютно нулевой конфигурации в истинном смысле, обеспечивая почти дурацкий пользовательский интерфейс. Вам нужно только понять несколько простых команд, предоставленных для использовать его для создания интерфейсных приложений.Программа не имеет никакого вторжения в проект.
И весь процесс будет автоматически устанавливать зависимости, так что процесс разработки может быть больше сосредоточен на кодировании. ПомимоParcelСборка выполняется очень быстро и использует многопроцессорную внутреннюю работу по сравнению сWebpackСкорость упаковки его быстрее.
Но в настоящее время большая часть упаковки проекта по-прежнему будет использоватьWebpack,потому чтоWebpackЭкосистема станет лучше, расширение будет богаче, а проблемы можно будет легко решить.
ParcelДля такого инструмента, для разработчиков, понять его — это фактически сохранить чуткость к новым технологиям и инструментам. Чтобы лучше уловить тенденцию и направление технологий, не более того.
2. Используйте
пройти черезyarn initинициализацияpackage.jsonдокумент. Может быть установлен после завершенияParcelсоответствующий модульparcel-bundler.
yarn add parcel-bundler --dev
новыйsrcКаталог используется для хранения исходного кода, написанного на этапе разработки. Создайте/src/index.htmlфайл какparcelУпакованный входной файл.
parcelа такжеwebpackОба поддерживают любой тип файла в качестве записи упаковки, ноparcelОфициально рекомендуется использоватьhtmlфайл в качестве записи об упаковке, причина в том, чтоhtmlЭто точка входа, когда приложение работает на стороне браузера.
В этом входном файле вы можете писать как обычно или ссылаться на некоторые файлы ресурсов. Упомянутые здесь ресурсы в конечном итоге будутparcelУпакованы вместе для вывода в выходной каталог.
Представьте сначала здесьmain.jsфайл сценария.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parcel Tutorials</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
новый/src/main.jsфайл, а затем создать новый/src/foo.jsдокумент.
foo.jsкES Moduleспособ экспорта объекта по умолчанию.
export default {
bar: () => {
console.log('hello parcel~')
}
}
main.jsпрошедшийimportимпортfooмодуль.
import foo from './foo';
foo.bar();
parcelпара поддержкиES ModuleДля упаковки модулей команда упаковки должна передавать путь записи упаковки.
yarn parcel src/index.html
parcelПо переданным параметрам он сначала найдетindex.htmlфайл, то согласноindex.htmlсредиscriptтег, чтобы найти импортированныйmain.jsфайл и, наконец,importвыписка найденаfooмодуль для завершения упаковки всего проекта.
parcelКоманда не только упаковывает приложение, но и запускает сервер разработки, связанный сwebpackсредиdev-serverТакой же. Откройте инструменты разработчика в браузере (консольF12), вы можете использовать функцию автоматического обновления в это время.
export default {
bar: () => {
// console.log('hello parcel~');
console.log('hello parcel11~');
}
}
Если вам нужен опыт горячей замены модулейparcelтакже поддерживается, вmain.jsнужно использоватьhmrкоторый предоставилapi.
судить первымmodule.hotСуществует ли объект, если объект существует, это доказывает, что текущая среда может быть использованаhmrизapi. использоватьmodule.hot.acceptМетод обрабатывает логику горячей замены модуля.
Но здесьacceptа такжеwebpackкоторый предоставилapiОдно дело другое,webpackсредиapiПолучает два параметра для обработки логики после обновления указанного модуля. а такжеparcelкоторый предоставилacceptОн получает только один параметр, то есть функцию обратного вызова, которая будет автоматически выполняться при обновлении модуля или обновлении модуля, от которого зависит модуль.
import foo from './foo';
foo.bar();
if (module.hot) {
module.hot.accept(() => {
console.log('hmr');
})
}
За исключением горячей заменыparcelОн также поддерживает очень удобную функцию, которая заключается в автоматической установке зависимостей.
Тогда представьте, что в процессе разработки приложения, если вы вдруг захотите использовать сторонний модуль, вам нужно сначала остановить работающий модуль.dev-serverЗатем перейдите к установке модуля, а затем перезапустите после завершения установкиdev-server. С автоматической установкой зависимостей это уже не такая заморочка.
Предположим, вы хотите использоватьjQuery, хотя этот модуль не установлен, это из-за автоматической установки зависимостей. Просто импортируйте его в обычном режиме. Импорт полного использованияjQueryкоторый предоставилapi, после сохранения файлаparcelИмпортированные модули будут автоматически загружены и установлены. Лишние операции в значительной степени избегаются.
import $ from 'jquery';
import foo from './foo';
foo.bar();
$(document.body).append('<h1>Hello Parcel</h1>');
if (module.hot) {
module.hot.accept(() => {
console.log('hmr');
})
}
ПомимоparcelОн также поддерживает загрузку других типов модулей ресурсов и по сравнению с другими упаковщиками модулей.parcelЗагрузка любого типа ресурсного модуля также не требует настройки.
Например, добавьте/src/style.cssфайл стиля. Затем добавьте в этот файл несколько простых стилей.
body {
background: red;
}
назадmain.jsпрошедшийimportИмпортируйте этот файл стиля и сохраните стиль, чтобы он вступил в силу немедленно.
import $ from 'jquery';
import foo from './foo';
import './style.css';
foo.bar();
$(document.body).append('<h1>Hello Parcel</h1>');
if (module.hot) {
module.hot.accept(() => {
console.log('hmr');
})
}
Никаких дополнительных плагинов за весь процесс не устанавливается, а также есть возможность добавлять картинки по желанию.
import $ from 'jquery';
import foo from './foo';
import './style.css';
import logo from './icon.png';
foo.bar();
$(document.body).append('<h1>Hello Parcel</h1>');
$(document.body).append(`<img src=${logo} />`);
if (module.hot) {
module.hot.accept(() => {
console.log('hmr');
})
}
Вкратце,parcelНадеюсь, опыт разработчиков таков, что вы можете просто делать то, что хотите, а за лишнее отвечают инструменты. Кроме тогоparcelОн также поддерживает динамический импорт.Если динамический импорт используется внутри, он автоматически разделяет код.
// import $ from 'jquery';
import foo from './foo';
import './style.css';
import logo from './icon.png';
foo.bar();
import('jquery').then($ => {
$(document.body).append('<h1>Hello Parcel</h1>');
$(document.body).append(`<img src=${logo} />`);
})
if (module.hot) {
module.hot.accept(() => {
console.log('hmr');
})
}
Вышеупомянутое в основномParcelНекоторые из наиболее часто используемых функций. в использованииParcelПочти никаких трудностей, только что выполнил один от начала до концаParcelЗаказ. все вещиParcelЭто делается автоматически внутри.
3. Развертывание в рабочей среде
воплощать в жизньparcelкоторый предоставилbuildКоманда поддерживает путь к файлу записи для запуска пакета в производственном режиме. Для проектов одинакового размераParcelкоэффициент скорости сборкиWebpackНамного быстрее. Потому чтоParcelВнутреннее использование многопроцессорной работы в то же время дает полный простор многоядернымCPUпредставление,Webpackтакже можно использовать вhappypackПлагины достигают этого.
parcel build src/index.html