svelte render

@Metamodern/Svelte-Render

Дружественный инструмент для сборки, ориентированный на джемстак

Я создал эту утилиту для конфигураций строительства каркасов для моих стройных проектов. Поскольку я сосредотачиваюсь на современных статических сайтах и ​​клиентских приложениях, которые можно развернуть с помощью NetLify, Sapper включает в себя много инфраструктуры для разработки на стороне сервера, которая мне не нужна. Svelte Kit не за горами в качестве замены следующего поколения для Sapper, но он не может быть готов к производству в ближайшем будущем, поэтому я буду поддерживать этот инструмент CLI, пока у меня не будет солидной замены.

Функции

Вот некоторые из функций, которые svelte-render добавляет поверх конфигурации начала начала:

• Предполагает разумную структуру каталога, но позволяет настраивать
• Включает сценарий CLI с флагами для общих вариантов рендеринга
• Включает в себя основные плагины из коробки
• Поддерживает файл конфигурации JavaScript для импорта дополнительных плагинов и т. Д.
• Поставляется со встроенной конфигурацией Babel (с опцией не транспилировать)
• Поддерживает рендеринг -крючки для автоматизации дополнительных этапов сборки
• ES модули повсюду - никогда require() снова!

Установить

npm i @metamodern/svelte-render

Использование CLI

Сценарий CLI выпускается только как модуль ES. Версия Minimum Node.js составляет 14 (последняя дата выпуска LTS).

npx svelte-render [context] [--key = value]

# default to process.cwd() as context
cd project
npx svelte-render [--key = value]

# skip production optimizations
npx svelte-render --development

# just output HTML from the entry file
npx svelte-render --client=0 --noCss

# specify a custom directory structure
npx svelte-render --src=. --dist=public

# specify the path to your config file
# ** if not at ./render.config.js **
npx svelte-render --configFile=./config/svelte-render.js

Файл конфигурации

Параметры могут быть указаны с использованием файла конфигурации. Файл должен использовать синтаксис импорта/экспорта модуля ES. Его экспорт по умолчанию должен быть функцией, которая принимает объект, содержащий параметры командной строки в качестве его привода, и возвращает объект, определяющий дополнительные параметры для передачи функции рендеринга.

Ожидается, что файл конфигурации будет найден по адресу ./render.config.js (относительно context ), но из командной строки можно указать пользовательский путь, как показано выше.

См. Ниже список всех вариантов, которые могут быть переданы в функцию рендеринга.

JavaScript API и параметры конфигурации

API JavaScript выпускается только как модуль ES. Commonjs require() не поддерживается.

Экспорт модуля по умолчанию является функцией со следующими параметрами:

 async function ( context : string , {
  src = 'src' ,
  assets = 'assets' ,
  dist = 'dist' ,
  entry = 'index.svelte' ,
  client = 'client.js' ,
  noCss = false ,
  development = false ,
  transpile = ! development ,
  rollupInputPlugins = [ ] ,
  rollupInputOptions = { } ,
  compilerOptions = { } ,
  sveltePreprocess = { } ,
  svelteOptions = { } ,
  terserOptions = { } ,
  browsers = 'defaults' ,
  babelPresets = [ [ '@babel/preset-env' , {
    targets : browsers ,
    corejs : 3 ,
    useBuiltIns : 'usage' ,
  } ] ] ,
  babelPlugins = [ ] ,
  babelOptions = { } ,
  before ,
  onRender ,
  after ,
} = { } ) : Promise < number > // returns 0 on success 

Необходимый

• Контекст : путь к корневому каталогу проекта

Примечание. Аргумент context требуется только при использовании API JavaScript. При использовании сценария CLI context по умолчанию для process.cwd() .

Настройка структуры каталога

Следующие параметры могут быть указаны как имена или пути файлов и будут решены по сравнению с context .

• SRC : родительский каталог entry и исходных файлов client
• активы : каталог статических активов, которые будут скопированы в dist
• Dist : Public Directory, где будут обслуживаться веб -файлы
• Запись : СВЕЛТ-файл, который будет предварительно предопределен в качестве первоначального представления (игнорируется, когда флаг development включен)
• Клиент : исходный файл JavaScript, который будет выполнен в качестве сценария на стороне клиента (только для того, чтобы отобразить статический HTML, установить client в false и не использовать флаг development )

Настройка флажков вариантов рендеринга

• NOCSS : не выводит CSS, сгенерированные из Blocks Svelte <style>
• Разработка : оптимизация производства пропустить (предварительная разметка, транспортировка JS, мини-министерство JS & CSS)
• Transpile : используйте Babel, чтобы преобразовать/полифил Client Side JS по мере необходимости для целевых браузеров (включен по умолчанию, если не пройден флаг development )

Расширенные варианты рендеринга (для Rollup, Svelte, Terser)

• RollupinputPlugins : входные плагины (официальные, сообщество)
• rollupinputoptions : дополнительные параметры ввода для прохождения в обморок
• CompileroPtions : параметры компилятора для передачи в rollup-plugin-svelte (под ключом compilerOptions )
• SVELTEPREPROCESS : Функции предварительной обработки для передачи в rollup-plugin-svelte (под ключом preprocess )
• СВОВНАЯ ОБЪЕДИНЕНИЯ : Дополнительные варианты для перехода к rollup-plugin-svelte
• Terseroptions : варианты передачи в rollup-plugin-terser

Варианты транспортировки (для вавилоны)

• Браузеры : действительная конфигурация браузерста
• Babelpresets : предустановки, чтобы пройти в Babel
• Babelplugins : плагины, чтобы пройти в Babel
• Babeloptions : дополнительные варианты для перехода в Babel

Примечание. Эти параметры игнорируются, когда transpile устанавливается на false

Рендеринг крючков

Рендеринг -крючки - это функции для выполнения в тандеме с основной функцией рендеринга. Каждая функция будет передаваться в разрешенный context и объект полного параметров. Асинхронные функции поддерживаются.

• Перед : Функция, чтобы призвать и ждать перед рендерингом
• ONRENDER : Функция, чтобы вызвать и ждать параллельно с сборкой сценариев клиента/входа
• после : функция, чтобы вызвать и ожидание после рендеринга

Лицензия

© 2020 Daniel C. Narey

Лицензия ISC