包简介

An opinionated Vite integration for CodeIgniter4 projects.

README 文档

README

CodeIgniter Vite 🔥⚡

An opinionated Vite integration for CodeIgniter4 projects,
just so that you don't have to think about it!

Easily organize and bundle JavaScript, TypeScript, and CSS files within a resources folder at the root of your CodeIgniter4 project:

resources/
├── js/ # your JavaScript and/or TypeScript files
├── static/ # files you want to copy as is. Eg. images, fonts, etc.
└── styles/ # your CSS files

🚀 Getting started
📦 Bundle for production
⚙️ Config reference
❤️ Acknowledgments
📜 License

🚀 Getting started

0. Prerequisites

Install Node.js* with one of the following package managers:
- npm (should be included with Node install)
- pnpm (recommended),
- yarn
*You may want to use Deno or Bun instead.

Create a package.json file:

# using npm
npm init

# using pnpm
pnpm init

# using yarn
yarn init

1. Installation

Install codeigniter-vite using composer:

composer require yassinedoghri/codeigniter-vite

Install Vite with vite-plugin-codeigniter:

# using npm
npm install --save-dev vite vite-plugin-codeigniter

# using pnpm
pnpm add -D vite vite-plugin-codeigniter

# using yarn
yarn add -D vite vite-plugin-codeigniter

2. Initial setup

Run the following command. This command handles steps 1-4 of Manual Setup for you.

php spark vite:setup

Manual Setup

Note

You may skip this if you've used the setup command above.

Copy the Vite.php file from vendor/yassinedoghri/codeigniter-vite/src/Config into your project's config folder, update the namespace to Config and have the class extend the original class like so:

<?php
// app/Config/Vite.php

declare(strict_types=1);

namespace Config;

use CodeIgniterVite\Config\Vite as CodeIgniterViteConfig;

class Vite extends CodeIgniterViteConfig
{
   // ...
}

Create your vite.config.js file in your project's root and add the vite-plugin-codeigniter plugin:

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

export default defineConfig(() => ({
  server: {
    port: 5173,
    strictPort: true, // prevents port from changing to something other than 5173
  },
  plugins: [codeigniter()],
}));

Add Vite's scripts to your package.json:

{
  //...
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
  //...
}

Create the resources folder in the root of your project:

resources/
├── js/ # your JavaScript and/or TypeScript files
├── static/ # files you want to copy as is. Eg. images, fonts, etc.
└── styles/ # your CSS files

3. Working with Vite's dev server

Set Vite environment to development in your .env:
```
# .env
vite.environment="development"
```

Run Vite's dev server with:

# using npm
npm run dev

# using pnpm
pnpm run dev

# using yarn
yarn run dev

By default, the server will launch @http://localhost:5173.

Work your magic! 🪄

Important

Add your JS/TS, and CSS files in the resources directory and inject them into your pages by using the routes/assets mapping in your app/Config/Vite.php file.

📦 Bundle for production

For production, run the build command:

# using npm
npm run build

# using pnpm
pnpm run build

# using yarn
yarn run build

This will create an assets folder in your public directory including all of your bundled css and js files + a manifest.json file under a .vite/ directory.

⚙️ Config reference

Routes/Assets mapping

For assets to be injected in your routes <head>, you must define the $routesAssets property in your app/Config/Vite.php file.

The $routesAssets property takes in an array of routes/assets mappings:

public array $routesAssets = [
  [
    'routes' => ['*'], // include these assets on all routes
    'assets' => ['styles/index.css', 'js/main.js'],
  ],
  [
    // include the map.js file in the /map route
    'routes' => ['/map'],
    'assets' => ['js/map.js'],
  ],
  [
    'routes' => ['admin*'], // only include these assets in Admin routes
    'assets' => ['js/admin.js'],
  ]
];

Note

You can use the * wildcard to match any other applicable characters in the routes.

Vite Environment

Vite environment is set to production by default, meaning it's looking for assets in the public/assets folder.
By setting it to development in your .env, it will instead point to Vite's dev server.

# .env
vite.environment="development"

Other properties

You can tweak CodeIgniterVite's config if needed:

// app/Config/Vite.php

// ...
public string $serverOrigin = 'http://localhost:5173';

public string $resourcesDir = 'resources';

public string $assetsDir = 'assets';

public string $manifest = '.vite/manifest.json';

public string $manifestCacheName = 'vite-manifest';
// ...

Important

These defaults are in sync with vite-plugin-codeigniter's defaults. If you edit these, make sure you set the same values for vite-plugin-codeigniter's options in your vite.config.js file.

❤️ Acknowledgments

This wouldn't have been possible without the amazing work of the CodeIgniter team.

Inspired by codeigniter-vitejs & codeigniter4/shield.

📜 License

Code released under the MIT License.

yassinedoghri/codeigniter-vite 适用场景与选型建议

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

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

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

围绕 yassinedoghri/codeigniter-vite 我们能提供哪些服务？

定制开发 / 二次开发

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

BUG 修复 & 性能优化

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

项目外包 & 长期维护

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

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

与 yassinedoghri/codeigniter-vite 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

maykonn/codeigniter-predis 12

The CodeIgniter Redis package

innoweb/silverstripe-page-icons 3

A simple library of SVG page type icons for enhancing your SilverStripe CMS interface.

daljo25/filament-tabler-icons 5

A Filament plugin that integrates tabler icons, allowing you to use them seamlessly across Filament forms, tables, actions, and more.

monachilada/craft-svgicons 0

Craft CMS Twig extension to include SVGs from the Feather and Zondicons SVG icon libraries directly in your templates.

wazum/stipple 1

Render small SVG icons to monochrome ANSI for terminal UIs (Laravel/Prompts, Symfony Console, plain CLI).

epicsweb/php-ci-messages 0

yassinedoghri/codeigniter-vite

包简介

关键字：