предисловие
В своей прошлой статье я просто объяснил схему оптимизации и этапы создания шаблонного проекта веб-пакета vue-cli, а в конце я подумал и с нетерпением ждал будущего построения внешнего интерфейса. В результате в это время родился [Parcel].На данный момент документов о Parcel мало, да и сам Parcel тоже находится в экспериментальной стадии скоростной итеративной разработки, но это действительно финальное решение для front-end строительство.Может быть, на этот раз действительно нет никого из
Первоначально я надеялся, что веб-пакет сможет доминировать в мире, но сWebpack становится все более сложным и раздутым, я действительно не очень уверен в его разработке.Дело не в том,что чем мощнее и полнее функция, тем разумнее.Каждый раз, когда я смотрю на официальный шаблон веб-пакета vue-cli, он содержит семь или восемь файлов конфигурации Логическая конфигурация даже превосходит по сложности бизнес-код, поэтому поддержание самой конфигурации — это уже огромный объем работы.Вам понадобится другой язык для отдельного управления конфигурацией в будущем?
Нулевая конфигурация переднего конца становится все выше и выше, и PARCEL привнесла революционные изменения в конструкцию переднего конца.
идеи
Посылка для практики, а также сборочная рамка Vue на основании его производного IViewindex.htmlодностраничный документ,src/package.jsonЭто зависит от управления пакетами
- index.html
- src/
- package.json
Да, да, почти невозможно упростить, больше не может увеличить, вот все бессмысленные Vue General Engineering, учитывая реальность проекта, примут некоторые совместимые и разработки, нам также нужны некоторые функции следующие
- .babelrc (устарело)
- postcss.config.js (устарело)
в,.babelrcДостигнуть TransCoder совместимый браузер,postcss.config.jsВнедрить браузеры, совместимые с преобразованием кодировки CSS,Я очень переживаю, что продолжу писать и есть другие незаменимые части, но к счастью, нет, действительно нет, выше приведен состав наиболее обтекаемой и масштабируемой Vue-компонентной части front-end проекта* (Оказывается, его можно снова упростить. Версия пакета 1.7.0 начинает изначально поддерживать построение VUE и не требует обработки переноса плагинов. Этот шаг опущен)
упражняться
Традиционно, чтобы интегрировать вышеупомянутые пять компонентов, нам нужно использовать веб-пакет для выполнения множества, нет, множества сложных конфигураций, чтобы он работал правильно, что является шаблоном разработки веб-пакета для vue-cli.build文件夹,config文件夹, и этоpackage.jsonПроисхождение длинного списка зависимых пакетов в
Но сейчас ничего не нужно, потому чтоparcelВсе работы были сделаны, все вindex.htmlЗависимости будут автоматически проанализированы и обработаны, поскольку это должно быть значение [программа], освобождая человеческих повторяющихся логических работ
packge.jsonвведен вparcel, но, к сожалению, посылка официально не завершила поддержку vue, но, к счастью, уже запущены сторонние плагины конвертации, и механизм плагинов посылки чрезвычайно элегантен, нам нужно только дополнительно представитьparcel-plugin-vue(Устаревший, Parcel-Plugin-Vue больше не нужен)
axios
1.2 vueа такжеvue-routerЭто необходимо для разработки проекта Vue
1.3 И эта статья начинается сiviewЗдесь объясняется структура компонентов, поэтому представьтеiview
1.4 parcel-bundlerа такжеparcel-plugin-vue
1.5 less
1.6 babel-preset-envа такжеbabel-plugin-transform-object-rest-spread
На самом деле не может быть меньше, если вы можете, пожалуйста, свяжитесь со мной, я был бы очень признателен :)
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html --public-url /"
},
"dependencies": {
"vue-router": "^3.0.1",
"axios": "^0.18.0"
},
"devDependencies": {
"babel-preset-env": "^1.6.1",（废弃）
"babel-plugin-transform-object-rest-spread": "^6.26.0",（废弃）
"less": "^2.7.3",（废弃）
"parcel-bundler": "^1.7.0",
"parcel-plugin-vue": "^1.5.0",（废弃）
"vue": "^2.5.16",
"iview": "^2.11.0"
}
2. Добавьте js-зависимости в index.html
Здесь следует отметить, что,./src/main.jsДолжен быть<div id="app"></div>импортировать после
<body>
<div id="app"></div>
<script src="./src/main.js"></script>
</body>
Избиение дракона 18 ладоней, удар по вызову это день, да, да, окончание :) Это то, что простое из наиболее оптимизированных масштабируемого здания для машиностроения VUE настолько подготовлена, может быть, многие люди, которых я вижу, здесь будет сомневаться в том, что источник не дал SRC / да, эта часть того, как написать это?
Не волнуйся,src/Часть исходного кода не является частью части построения, обсуждаемой в этой статье, потому что это код разработки компонентов Vue, а все проекты проектов Vue одинаковы. И поскольку в мире есть github, мы должны использовать его с пользой.Для шаблона проекта посылки-вью, упомянутого в этой статье, я загрузил его на github как с открытым исходным кодом:parcel-vue, и сделал для него простенький официальный сайтОфициальный сайт Парсел-ВУЭ(На этом официальном сайте есть конструкция технического решения, упомянутая в этой статье)
3. Предварительный просмотр проекта шаблона Parcel-VUE
Я лично стремлюсь к минимализму и расширению.Ниже приведена структура каталогов шаблонных проектов Parcel-VUE.
├── dist 构建结果
│ └── index.html
├── index.html 首页文件
├── node_modules
├── package.json
├── postcss.config.js CSS配置
├── src 开发源码
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.js
│ └── router
└── static 静态文件
├── css
├── img
└── js
В то же время я сделал инструмент cli, который используется для инициализации шаблона разработки Parcel-VUE.
npm install xserver-cli -g
x-cli parcel-vue myproject
cd myproject
Разработка и отладка
npm run dev
Формальная сборка
npm run build
постскриптум
Официальный предварительный просмотр веб-сайта выглядит следующим образом: на основе разработки iview, строительства участка, первое время строительства составляет5 секундили так, кеш позже встроен1 секундаИтак, горячее развертывание в ответ на общую разработку и отладку1 мс—10 мсПримерно, это намного быстрее, чем webpack (от десятков секунд до минут)
Гитхаб:parcel-vue