包简介

Vite Frontend Tooling, Lightning Fast HMR for SilverStripe 4

README 文档

README

Silverstripe Vite Plugin

Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production.

This plugin configures Vite for use with Silverstripe.

Install

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line, in the root folder of your project:

Install the plugin

composer require swordfox/vite

Copy vite yml config

cp vendor/swordfox/vite/_config/vite.yml.example app/_config/vite.yml

Make sure to set the path to images folder of your theme assetsImageFolder

You can also use extra_requirements_css, editor_css as shown in the config, in order to apply custom css to admin environment through Vite

Copy vite config

cp vendor/swordfox/vite/vite.config.js.example vite.config.js

You might need to update paths to your assets in vite.config.js, eg.: themes/custom/src/app.scss

Prepare package.json

We need to set up package.json in our project root folder. Use it for all frontend packages. If you have one, make sure to include npm scripts follows:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

and install necessary packages:

npm install laravel-vite-plugin autoprefixer@latest sass --save-dev

or run the command to copy example package.json from the source folder to start with

cp vendor/swordfox/vite/package.json.example package.json

Finally, run

npm install

Add APP_URL to your .env with the local address of your website

APP_URL=//mywebsite.com
# APP_URL_CDN="//cdn.mywebsite.com"
ASSET_URL=${APP_URL}
SS_BASE_URL=${APP_URL}

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

How To Use

We need to include css in our head tag

<head>
  ...
  $Vite.CSS
</head>

The same goes with js requirements, but it can be included in body tag instead, at the very bottom

<body>
  ...
  $Vite.JS
</body>

Excellent! Next, let's get into a groove. For dev environment you need to run

npm run dev

Compiling for Production

npm run build

In order to add assets in your template .ss files you can use these helpers:

$Vite.asset('themes/custom/src/images/image.jpg')

or, shortcut if you set assetsImageFolder in your vite.yml as mentioned above

$Vite.image('image.jpg')

You can also reach vite helper through SiteConfig

$SiteConfig.Vite.image('image.jpg')

Make sure to include glob import that will handle assets on npm run build. To do so, add this at the very top of your main js file. You might need to update paths or include other assets that are involved in your own build.

import.meta.glob([
  './images/**',
  './fonts/**',
]);

Don't forget to update your .gitignore by adding these

/public/hot
/public/build/

You are all set now, enjoy.

swordfox/vite 适用场景与选型建议

swordfox/vite 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 3.88k 次下载、GitHub Stars 达 4，最近一次更新时间为 2023 年 04 月 17 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「silverstripe」「Hmr」「vite」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 swordfox/vite 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 swordfox/vite 我们能提供哪些服务？

定制开发 / 二次开发

基于 swordfox/vite 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发