README

查看 /app/ 目录下的文件以获取详细信息。有关 UI 工具包的详细信息，请查看 https://github.com/a2nt/webpack-bootstrap-ui-kit.git

注意：我更喜欢使用纯 JS 和尽可能少的外部依赖来实现更高的加载速度。没有 jQuery 和 React，但可以选择连接。

UI 演示

使用 UI 仓库 https://github.com/a2nt/webpack-bootstrap-ui-kit.git 构建 HTML 静态文件

演示：https://rawcdn.githack.com/a2nt/webpack-bootstrap-ui-kit/master/dist/index.html

要求

• composer
• node
• yarn
• pnpm 包管理器

https://pnpm.js.org/en/installation

注意：您可以使用 npm 包管理器，但此选项可以节省您的磁盘空间。如果您更喜欢 npm，请将 pnpm 命令替换为 npm

安装

git clone https://github.com/a2nt/silverstripe-webpack.git
cd silverstripe-webpack
composer install
pnpm install
cp ./env-dist ./.env

这些步骤取决于您的环境

1. 编辑 .env 文件以定义数据库访问凭证和 CMS 默认管理员
2. sudo chown www-data:www-data -R public/assets && mkdir silverstripe-cache && chown www-data:www-data -R silverstripe-cache (www-data 是常用的 UNIX 用户名，但可能取决于您的环境)
3. 打开您的-dev-url.pro/dev/build?flush 以构建数据库

• 编辑 .env、robots.txt、humans.txt、cache.appcache、manifest.json 和 package.json 以设置您的项目
• 在执行完 yarn build 后，将 favicon.ico 复制到 ./public 目录

构建您自定义的 UI

编辑以下文件

• app/client/src/js/_layout.js

• app/client/src/js/types/您的自定义类名.js

• app/client/src/scss/_layout.scss

• app/client/src/scss/types/您的自定义类名.scss

要编译，请使用：yarn build。要启动开发服务器，请使用：yarn start

在某些 cpanel 托管主机上安装 composer

php -r "copy('https://getcomposer.org.cn/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

php -d memory_limit=-1 composer.phar update --ignore-platform-reqs

功能

• 您可以使用 /app/_config/webpack.yml 设置 webpack 服务器参数，这些参数将由 webpack 服务器和 SilverStripe 用于服务静态内容
• 您可以在模板中使用 WebpackJS('文件名') 和 WebpackCSS('文件名') 函数来要求 JS 和 CSS。如果网站处于开发模式并且 webpack 服务器正在运行，它将通过静态文件或使用 webpack 来提供
• WebpackTemplateProvider::WebpackJS('文件名') 和 WebpackTemplateProvider::WebpackCSS('文件名') 可以在 PHP 区域使用
• 所有图像将在 /app/client/src/img 中优化，并将写入 /app/client/dist/img（默认情况）
• 将在 /app/client/dist/icons 使用 /app/src/favicon.png 生成favicon
• 文件夹 /app/client/src/js/types 用于创建特定于页面的 JS（只需在那里创建 JS 文件即可编译）
• 文件夹 /app/clent/src/scss/types 用于创建特定于页面的 CSS（只需在那里创建 SCSS 文件即可编译）
• 自动检查（JS+SCSS）
• 默认包含 Bootstrap 5
• 默认包含 Font-Awesome
• 延迟需求加载
• 自动加载需求
• 包含基本 silverstripe 模块
• 一些必要的扩展，例如将 silverstripe 元素作为 bootstrap 网格列进行编辑
• 内置主题支持

... 更多功能可用，但我没有太多时间来描述它们...

文件夹结构

• /app/_config/webpack.yml（Webpack 配置）
• /app/src/WebpackTemplateProvider.php（WebpackJS 和 WebpackCSS 功能）
• /app/src/DeferedRequirements.php（延迟需求 + 需求自动加载）
• /app/templates/Page.ss (Page.ss 的示例)
• /app/src (您的后端源代码)
• /app/client/src (您的前端源代码)
• /app/client/dist (您的编译后的生产资产)

• /app/client/src/js (您的 JS 脚本)
• /app/client/src/js/app.js (包含网站全局组件的主应用程序文件)
• /app/client/src/js/main.js (您的自定义网站全局功能)
• /app/client/src/js/_pageType_and_component_template.js (可以用来创建新模块的模板)
• /app/client/src/types/*.js (需要自动编译的额外页面特定模块。建议使用 *ClassName*.js 格式，然后在 SilverStripe 自定义控制器区域中 require 它)

• /app/client/src/scss (待编译的您的样式)

• /app/client/src/scss/app.scss (包含网站全局组件的主应用程序样式文件)

• /app/client/src/scss/_variables.scss (您的自定义和 Bootstrap 变量)

• /app/client/src/scss/_layout.scss (您的网站全局样式)

• /app/client/dist (编译后的前端文件 js、css、图像等)

命令

• yarn - 更新包
• yarn start - 启动 webpack 开发服务器
• yarn build - 构建生产资产
• yarn lint:check - 检查 SCSS 和 JS 代码格式
• yarn lint:fix - 自动修复 SCSS 和 JS 代码格式

有用的 UNIX 控制台工具

代码搜索 (find . -name "*.txt" | xargs grep "some text" replacement)

ag "some text" ./ https://github.com/ggreer/the_silver_searcher

带代码高亮的文件内容 (cat replacement)

bat ./app/src/Pages/Page.php https://github.com/sharkdp/bat

文件列表 (ls replacement)

exa -aTL3 ./app https://github.com/ogham/exa

带有 bat 代码高亮的 git diff 工具 (git show)

https://github.com/dandavison/delta