README

Silverstripe Vite 插件

Vite 是一个现代的前端构建工具，它提供了一个极快的开发环境，并为生产打包你的代码。

此插件配置 Vite 以与 Silverstripe 一起使用。

安装

要克隆和运行此应用程序，你需要在计算机上安装 Git 和 Node.js（它包含 npm）。从你的命令行，在项目的根目录中

安装插件

composer require swordfox/vite

复制 vite yml 配置

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

请确保将主题图片文件夹的路径设置为 assetsImageFolder

你还可以使用配置中显示的 extra_requirements_css、editor_css，以便通过 Vite 将自定义 CSS 应用于管理环境

复制 vite 配置

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

你可能需要更新 vite.config.js 中资产的路径，例如：themes/custom/src/app.scss

准备 package.json

我们需要在我们的项目根目录中设置 package.json。将其用于所有前端包。如果你有一个，请确保包含以下 npm 脚本

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

并安装必要的包

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

或运行命令以从源文件夹复制示例 package.json 以开始

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

最后，运行

npm install

将 APP_URL 添加到 .env 中，并使用你网站的本地地址

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}"

如何使用

我们需要在我们的 head 标签中包含 CSS

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

JavaScript 依赖项也是如此，但可以包含在 body 标签中，位于底部

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

太棒了！接下来，让我们开始。对于开发环境，你需要运行

npm run dev

为生产编译

npm run build

为了在你的模板 .ss 文件中添加资产，你可以使用以下助手

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

或者，如果如上所述在 vite.yml 中设置了 assetsImageFolder，则可以使用快捷方式

$Vite.image('image.jpg')

你还可以通过 SiteConfig 访达 Vite 助手

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

请确保包括 glob 导入，这将处理在 npm run build 时的资产。要做到这一点，请在你的主 js 文件的最顶部添加此内容。你可能需要更新路径或包含其他涉及你自己的构建的资产。

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

不要忘记通过添加以下内容来更新你的 .gitignore

/public/hot
/public/build/

swordfox / vite

维护者

详细信息

README

Silverstripe Vite 插件

安装

如何使用