README

此包允许您通过使用 WebpackEncoreBundle 和 ViteFait 将 Vite 集成到您的 Symfony 应用程序中

安装

请确保已安装 Node 和包管理器 (Yarn)。

步骤 1：下载包

打开命令行，进入您的项目目录，并执行以下命令以下载此包的最新稳定版本

$ composer require bechir/vite-bundle

步骤 2：启用包

然后，通过将其添加到项目 config/bundles.php 文件中注册的包列表中来启用该包

// config/bundles.php

return [
    // ...
    Bechir\ViteBundle\BechirViteBundle::class => ['dev' => true],
];

在 config/packages/bechir_vite.yaml 中添加包配置

bechir_vite:
  output_path: '%kernel.project_dir%/public/dist'

步骤 3：安装 ViteFait

# using yarn
yarn add --dev vite-fait
# using npm
npm install vite-fait --save-dev

用法

在根目录中创建 vite.config.js 文件，并在其中添加以下代码

const ViteFait = require('vite-fait');

ViteFait
  .setRoot('assets')
  .setOutputPath('../public/dist')
  .addEntry('app', './assets/app.js')
  .addEntry('admin', './assets/admin/app.js');

module.exports = ViteFait.getViteConfig()

在 package.json 中添加 vite-fait 脚本

{
  "scripts": {
    "build": "vite-fait build",
    "dev": "vite-fait dev",
  }
}

然后，使用 yarn build 或 npm run build 运行您的第一次构建，它将在 public/dist 中生成 entrypoints.json 文件

{
  "entrypoints": {
    "app": {
      "js": [
        "/dist/app.7f38ab96.js"
      ],
      "css": [
        "/dist/app.c385b6b3.css"
      ]
    },
    "admin": {
      "js": [
        "/dist/admin.a88436ae.js"
      ],
      "css": [
        "/dist/admin.0e68df5b.css"
      ]
    }
  }
}

在 templates/base.html.twig 中添加 twig 函数

<html>
<head>
    {{ vite_entry_link_tags('app') }}
</head>
<body>
    <!-- html code -->
    {{ vite_entry_script_tags('app') }}
</body>
</html>

阅读 vite 文档获取更多信息

使用插件

在阅读本节之前，请先阅读如何使用 vite 插件

在 usePlugins 方法中放置您的插件

const fooPlugin = function() {
  return {
    name: 'vite-plugin-foo',
    configureServer() {
      console.log('foo');
    }
  }
}

ViteFait
  .usePlugins(fooPlugin()) // use array for multiple plugins: [fooPlugin(), barPlugin()]

待办事项

添加测试
React 支持
Vue 支持
文档

bechir / vite-bundle

维护者

详细信息