cleup/vite-php

将 Vite 集成到您的项目中

维护者

详细信息

github.com/cleup/vite-php

主页

源代码

问题

安装: 11

依赖者: 0

建议者: 0

安全: 0

星标: 1

关注者: 1

分支: 0

开放问题: 1

v1.0.1 2024-01-22 20:19 UTC

Requires

  • php: >=8.1

MIT aab55eec554e594be4b6d43cf161267c1023c95c

  • Eduard Y <dev.woop@priveted.com>

phpvitephp-vitecleup

This package is auto-updated.

Last update: 2024-09-21 12:22:09 UTC

README

用于在您的 php 或 Cleup 项目中使用 Vite 的库

安装

  1. 使用 composer 安装 cleup/vite-php 库
composer require cleup/vite-php
  1. 创建一个 Vite 项目 (https://vite.ac.cn/guide/)
npm create vite@latest
  1. 安装 cleup/vite-plugin 插件 (https://github.com/cleup/vite-plugin)
npm i cleup/vite-plugin

用法

配置 vite.config.js

// vite.config.js
import { defineConfig } from "vite";
import cleup from "cleup-vite-plugin";

export default defineConfig({
    plugins: [
        cleup([
            "assets/js/app.js"
        ])
    ],
});

在合适的位置创建 Vite 类的新实例

// header.php
use Cleup\Foundation\Vite;

$vite = new Vite([
    /*
       Force development mode.
       By default, this parameter will change automatically depending on the state of the development server.
    */
    'dev' => false,

    /*
        The build directory (default: 'build')
    */
    'buildDir' => 'build',
]);

将 use 方法放在您文档的 head 标签内

<head>
    ...
    <?= $vite->use('assets/js/app.js'); ?>
</head>

启动 node js 开发服务器

npm run dev

打开项目页面，我们将看到以下代码

<head>
    ...
    <!-- If the development mode -->
    <script  type="module" src="http://127.0.0.1:5173/@vite/client"></script>
    <script  type="module" src="http://127.0.0.1:5173/assets/js/app.js"></script>
    <!-- If the mode of production-->
    <script  type="module" src="/build/assets/app-AOYsxs3O.js"></script>
</head>

使用样式

将样式导入到 app.js
// assets/styles/app.js
import '../styles/app.css';
...

使用 app.js，样式文件将自动附加

<head>
    ...
    <?= $vite->use('assets/js/app.js'); ?>
</head>

输出

<head>
    ...
    <!-- If the development mode -->
    <script  type="module" src="http://127.0.0.1:5173/@vite/client"></script>
    <script  type="module" src="http://127.0.0.1:5173/assets/js/app.js"></script>
    <style type="text/css" data-vite-dev-id="path/to/assets/styles/app.css">body {background-color: #6294ff}</style>
    <!-- If the mode of production-->
    <link rel="stylesheet" type="text/css" href="/build/assets/app-WNmNaalN.css" />
    <script  type="module" src="/build/assets/app-AOYsxs3O.js"></script>
</head>
使用 cleup-vite-plugin 使用样式
// vite.config.js
...
export default defineConfig({
    plugins: [
        cleup([
            "assets/js/app.js",
            "assets/styles/example.scss", // Pre-install the sass pre-processor
            "assets/styles/root.css",
        ])
    ],
});

在文档文件中使用此方法时，您需要明确设置入口点

<head>
    ...
    <?php /* The standard method */?>
    <?= $vite->use('assets/styles/root.css'); ?>
    <?= $vite->use('assets/js/example.scss'); ?>
    <?= $vite->use('assets/js/app.js'); ?>

    <?php /* To simplify development, use an array with entry points */?>
    <?= $vite->use([
      'assets/styles/root.css',
      'assets/js/example.scss',
      'assets/js/app.js',
    ]); ?>
</head>

标签属性

更改属性的一个简单方法

<head>
    ...
    <?= $vite->use('assets/styles/root.css', [
        'type' => 'text/css'
    ]); ?>

    <?= $vite->use('assets/js/app.js', [
        'key' => 'value',
        ...
    ]); ?>
   ...
</head>

使用关联数组

<head>
    ...
    <?= $vite->use([
        'assets/js/app.js' => [
            'type' => 'text/css'
        ],
        'assets/js/app.js' => [
            'key' => 'value'
        ]
        'example.scss' // Standard attributes or those specified by the $attributes parameter will be used
    ]); ?>
    ...
</head>