包详细信息

@sitegeist/vitesse

sitegeist121ISC2.0.1

FE toolkit for sitegeist TYPO3 projects (mainly using Vite)

自述文件

🆅🅸🆃🅴🆂🆂🅴

Frontend building for sitegeist TYPO3 projects based on vite

Contents

  1. Setup
  2. Settings
  3. Usage
  4. Example Settings file

Setup

Step 1

yarn add @sitegeist/vitesse

or

npm install @sitegeist/vitesse --save-dev

Step 2

If you are not using typed imports (e.g. import { value, type Type } from 'somewhere' instead of import { value, Type } from 'somewhere'), add this option to your tsconfig.json file:

{
    "compilerOptions": {
      "verbatimModuleSyntax": true,
    }
}

If the file doesn't exist yet, create it.

Step 3

Create a vitesse.config.json file and add your build settings

Settings

Setting Type Default
extensionPath String /typo3conf/ext/sitepackage/
build.inputFiles Array<string> - (mandatory)
build.outputPath String ./Resources/Public/Build/
build.outputFilePattern String [name].min.js
build.tailwindConfigFile String ./tailwind.config.js
build.svelteConfigFile String ./svelte.config.js
spritemap.prefix String
spritemap.inputFiles String ./Resources/Private/Images/SVG-Icons/*/.svg
spritemap.outputPath String ./Resources/Public/Images/
spritemap.outputFileName String svg-icons.svg
emptyOutDir Boolean false
excludeTailwind Boolean false
includeSvelte Boolean false
modulePreload Boolean true

Usage

Run the commands vitesse for build or vitesse --watch for watcher or add this to your package.json file:

{
    "scripts": {
        "build": "vitesse",
        "watch": "vitesse --watch"
    }
}

Example Settings file

{
    "extensionPath": "/vendor/sitegeist/sitepackage/",
    "build": {
        "inputFiles": [
            "./Resources/Private/Styles/Main.scss",
            "./Resources/Private/Components/**/*.ts"
        ],
        "outputPath": "./Resources/Public/Build/",
        "outputFilePattern": "[name].min.js"
    },
    "spritemap": {
        "prefix": "abc-",
        "inputFiles": "./Resources/Public/Icons/SVG-Sprite/**/*.svg",
        "outputPath": "./Resources/Public/Build/Images/",
        "outputFileName": "svg-icons.svg"
    },
    "emptyOutDir": false,
    "excludeTailwind": false,
    "includeSvelte": true,
    "modulePreload": false
}

…