README

简介

Vite 是一款现代前端构建工具，它提供了极快的开发环境并为生产环境打包你的代码。这是 CodeIgniter 4 的后端集成，用于加载你的开发和生产资产。

安装

第三方

你可以将其作为 第三方 安装

cd app/ThirdParty

git clone https://github.com/trianayulianto/vite-codeigniter-4.git

在 app/Config/Autoload.php 中设置自动加载

public $psr4 = [
    // others
    'Inertia'     => APPPATH . 'ThirdParty/vite-codeigniter-4/src'
];

用法

安装 Vite 和 Laravel 插件

首先，你需要使用你选择的 npm 包管理器安装 Vite

npm install --save-dev vite

你可能还需要安装额外的 Vite 插件，例如 Vue 或 React 插件

npm install --save-dev @vitejs/plugin-vue

npm install --save-dev @vitejs/plugin-react

配置 Vite

感谢 Laravel，配置 Vite 已经通过他们的插件变得更加容易。参见 Laravel Vite Plugin。

npm install --save-dev laravel-vite-plugin

更新环境变量

APP_URL="https://:8000"

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

在项目根目录创建一个 vite.config.js 文件

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import react from '@vitejs/plugin-react';
// import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
        // react(),
        // vue({
        //     template: {
        //         transformAssetUrls: {
        //             base: null,
        //             includeAbsolute: false,
        //         },
        //     },
        // }),
    ],
});

如果你正在构建一个 SPA，通过移除上面的 CSS 入口并从 JavaScript 中 导入你的 CSS，你可以获得更好的开发者体验。

加载你的脚本和样式

配置了 Vite 入口点后，你只需在应用根模板的 <head> 中添加一个 vite() 助手来引用它们

...
    <!-- ViteJs Helper -->
    <?= vite('resources/js/app.js') ?>
...

如果需要，你还可以在调用 vite() 助手时指定编译资产的构建路径

...
    <!-- Given build path is relative to public path. -->
    <?= vite('resources/js/app.js', 'vendor/dist') ?>
...

React

如果你使用 React 并需要热模块替换，你需要在 vite() 助手之前包含一个额外的助手

...
    <!-- ViteJs Helper -->
    <?= vite_react_refresh() ?>
    <?= vite('resources/js/app.js') ?>
...

测试

composer test

灵感来源

Laravel Vite

trianayulianto / vite-codeigniter-4

维护者

详细信息