Piaoren (飘刃)

Инструмент для быстрой упаковки веб-приложений, поддерживающий файлы .vue. В процессе разработки используется Rollup для упаковки.

Только для изучения и исследований, не использовать в производстве.

Репозитории

• Github: https://github.com/chjtx/pr1

• Код: https://gitee.com/chenjianlong/pr1

Особенности и преимущества

— Высокая скорость работы. Piaoren преобразует только import/export, что позволяет избежать использования babel при разработке. — Эффективность. Можно использовать браузер Google Chrome версии 99.9% для отладки исходного кода без использования source map. Компонент this не указывает на window. — Наглядность. При разработке можно использовать инструменты браузера Elements для поиска файла компонента по свойствам DOM. — Небольшой размер. Используется Rollup с оптимизацией встряхивания дерева, а также uglify для эффективного сжатия.

Сравнение Piaoren и Vue-CLI

Сравнение проводилось на примере небольшого проекта Vue с более чем 30 компонентами на компьютере с Windows 10, процессором Intel Core i5, 8 ГБ оперативной памяти и подключением к сети 4G. Использовались следующие версии инструментов: Piaoren 0.1.1 и @vue/cli 3.6.3.

Вывод: Piaoren имеет преимущество перед Vue-CLI по времени установки, скорости запуска, скорости обновления и времени упаковки. Однако Piaoren уступает Vue-CLI в плане конфигурации. Для небольших проектов без необходимости сложной настройки рекомендуется использовать Piaoren, а для средних и крупных проектов, требующих комплексного подхода, — Vue-CLI.

Начало работы

Для установки Piaoren выполните команду:

npm i -g piaoren

После установки можно запускать команды Piaoren из любого каталога.

Чтобы создать новый проект, выполните следующую команду:

pr1 init
? Project name: # Минимум два символа, могут быть буквы, цифры, дефисы и подчёркивания. Цифры не могут стоять в начале.
? Project description: # Необязательно

Будет создана папка с именем проекта, содержащая необходимые файлы проекта.

Перейдите в папку проекта и запустите команду dev для запуска режима разработки:

npm run dev

Изменения в файле src/main.js: добавьте компонент Layout.

Создайте папку src/pages и файл src/pages/Layout.vue:

<!-- pages/Layout.vue -->
<template lang="pug">
div
  div.top
    input(v-model="text")
    button(@click="submit") 添加
  ul
    Item(v-for="(i, k) in items" :name="i" :key="k")
</template>
<script>
import Item from './Item.js'
export default {
  components: {
    Item
  },
  data () {
    return {
      text: '',
      items: []
    }
  },
  methods: {
    submit () {
      this.items.push(this.text)
      this.text = ''
    }
  }
}
</script>
<style lang="sass" scoped>
$bg: #ccc;

.top {
  padding: 20px;
  background: $bg;
}
</style>

Создайте файл src/pages/Item.js:

// pages/Item.js
import html from './Item.html'

export default {
  template: html,
  props: {
    name: String
  }
}

Создайте файл src/pages/Item.html:

<!-- pages/Item.html -->
<li class="item">{{ name }}</li>

<style scoped>
.item {
  background: #eee;
}
</style>

Откройте URL http://localhost:8686/ в браузере.

В этом примере показано, как создавать компоненты Vue двумя способами:

1. Использование файлов .vue, которые поддерживают обычный HTML/CSS/JS и SASS/PUG, но не поддерживают Less/TypeScript. Обратите внимание на PUG в Layout.vue, первая строка не должна начинаться с пробела.

2. Использование HTML и JS для создания компонентов Vue. Если есть два файла с одинаковыми именами и путями, например Component.html и Component.js, Piaoren будет обрабатывать эти файлы как компоненты Vue. Следует отметить, что HTML-файл не включает скрипт, поэтому шаблон не нужен, просто напишите div, и он не поддерживает PUG.

После завершения разработки используйте следующую команду для сборки:

npm run build

По завершении сборки дважды щёлкните index.html в папке dist, чтобы открыть его в браузере. Если проект содержит запросы AJAX, протокол file:// не может выполнять междоменные запросы. Вы можете запустить Piaoren в папке dist с помощью команды pr1 start 8080, чтобы запустить сервер Piaoren. Откройте URL http://localhost:8080/ в браузере.

Команды

Команда pr1 init создаёт новый проект и инициализирует файлы проекта:

pr1 init

Команда pr1 start запускает сервер Piaoren:

pr1 start [port] [config]

Пример:

pr1 start — запуск сервера по умолчанию на порту 8686 и использование файла конфигурации pr1.config.js в корне проекта. pr1 start 8080 — запуск сервера на порту 8080. pr1 start --config="./config.js" — использование файла конфигурации ./config.js. pr1 start 8080 --config="./config.js" — запуск сервера на порту 8080 и использование файла конфигурации ./config.js.

Команда pr1 build упаковывает проект:

pr1 build [entry] [config]

Пример:

pr1 build index.html — упаковка с использованием файла конфигурации по умолчанию. pr1 build index.html --config="./config.js" — упаковка с использованием указанного файла конфигурации. Поддержка горячего обновления для компонентов .vue

Удалить опцию «hot» в «style», установить значение true.

Исправить проблему, из-за которой при первой загрузке возникал белый экран после того, как cookie были переданы с аргументами.

Исправление проблемы, при которой ресурсы node_modules с одинаковыми путями создавали два разных ресурса.

v0.2.13 (2019-05-23)

Исправлена ошибка, когда cookie не определены.

v0.2.12 (2019-05-22)

Использование cookie для передачи аргументов вместо URL. Это делает путь к файлу более понятным.

Исправлен баг в v0.2.11, связанный с отсутствием CSS при упаковке.

v0.2.11 (2019-05-22)

Исправлены проблемы с поддержкой стилей для псевдоэлементов ::.

Поддержка нескольких стилей в компонентах. Стили внутри компонента являются стилями компонента. Если используется scoped, то стили не влияют на дочерние компоненты. Без scoped стили влияют на дочерние компоненты. Для глобальных стилей используйте тег link для импорта.

Оптимизация опции hot: 'style'.

v0.2.10 (2019-05-12)

Поддерживается синтаксис файлов .vue вида export default Vue.extend({).

v0.2.9 (2019-05-08)

Исправлена проблема с ошибкой интерпретации при использовании import с точкой с запятой в конце.

2019-05-06

v0.2.8 исправляет проблему с оптимизацией структуры проекта, которая вызывала ошибки в некоторых путях JavaScript.

v0.2.7

Возврат к использованию Object.freeze для замораживания exports.

В HTML-вводе используется обратный слэш для сохранения формата.

Исправлена проблема, при которой строки import и export в HTML-файлах также преобразовывались.

Обновлены примечания.

v0.2.6 (2019-05-04)

По умолчанию vue.min.js заменён на меньший по размеру vue.runtime.min.js.

Исправлена проблема в разработке, когда доступ к функции abc() был невозможен из других функций в том же файле.

Отменена заморозка Object.freeze всего exports, вместо этого используется Object.defineProperty для обработки локальных констант.

2019-05-02

v0.2.2 исправляет ошибку в npm-пакете v0.2.1.

v0.2.3 исправляет проблему отсутствия индекса по умолчанию.

v0.2.4 исправляет проблему, при которой опция hot reload переставала работать.

v0.2.5 исправляет проблему, при которой экспортируемые свойства могли быть изменены (используется Object.freeze).

v0.2.1 (2019-04-30)

Добавлена поддержка метода resolveId плагина rollup.

Улучшена структура проекта.

Статические файлы используют относительные пути относительно текущего файла ссылки.

v0.2.0 (2019-04-29)

Добавлена поддержка синтаксиса import a, { b, c } ... и export { a } from ....

Добавлена поддержка сжатия изображений размером менее 4 КБ в base64.

Добавлена функция автоматического копирования ресурсов изображений в соответствующие папки статических файлов в HTML и CSS.

Добавлен параметр html2VueRender, который по умолчанию включён. При этом HTML и JS находятся на одном уровне каталогов и имеют одинаковое имя, HTML будет преобразован в функцию рендеринга Vue.

Решена проблема использования sass с @import для импорта путей.

v0.1.1 (2019-04-26)

Добавление опции горячего обновления hot, поддерживаются только два способа обновления: style или перезагрузка страницы.

Обновление документации, добавление сравнения с vue-cli.

v0.0.10 (2019-04-24)

Завершение документации и выпуск.

Поддержка автора

Автор нуждается в поддержке для продолжения работы над проектом и написания дополнительных руководств и советов по использованию. Если будет достаточно поддержки, автор планирует добавить поддержку React, TypeScript, асинхронных модулей и т. д.

Способы поддержки

Сделайте небольшое пожертвование, чтобы автору не приходилось искать работу на переправах.

Лицензия

MIT