使用 @symfony/ux-toolkit 时，将组件安装到指定目录的核心做法是配置 webpack encore 的 addentry 或 vite 的入口文件，确保该目录下的 js 文件被正确打包并引入。具体而言，你需要在项目的 javascript 入口文件中导入目标目录下的组件模块，webpack 或 vite 会自动处理依赖解析和打包输出。若目录结构特殊，需检查 resolve.alias 或路径别名设置，避免模块找不到。默认情况下，组件会随主包一起输出，无需额外配置即可在页面中使用。
如何通过 Webpack Encore 配置将组件放入自定义 JS 目录？
通过 Webpack Encore 将组件放入自定义目录，需在 webpack.config.js 中使用 addEntry 指定入口文件路径，并确保该路径指向你希望包含组件的目录。例如，若组件位于 assets/js/components/，可创建入口文件 assets/js/app.js 并导入该目录下的组件。Encore 会自动打包所有依赖，输出到 public/build/ 目录。关键点是入口文件必须显式引用目标组件，否则不会被打包。
// webpack.config.js
const Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.js') // 入口文件指向自定义目录
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction());
module.exports = Encore.getWebpackConfig();
// assets/js/app.js
import '../js/components/Button'; // 显式导入组件目录
import '../js/components/Modal';
// 其他初始化代码
console.log('App initialized with custom components');
运行 yarn encore dev 后，public/build/app.js 将包含 Button 和 Modal 组件的代码。验证方法：检查浏览器开发者工具的网络面板，确认 app.js 已加载且无 404 错误。若组件未出现，检查导入路径是否相对正确，以及 addEntry 是否指向了包含组件引用的入口文件。
Vite 环境下如何将组件部署到指定构建目录？
在 Vite 环境中，将组件部署到指定目录需配置 vite.config.js 的 build.outDir 属性，并在入口文件中导入目标组件。Vite 默认输出到 dist/，但可通过 outDir 修改为如 public/assets/vite-build/。入口文件（如 src/main.js）必须显式导入组件目录，Vite 才会将其纳入构建。与 Webpack 不同，Vite 不需要额外插件处理模块解析，路径需符合 ES 模块规范。
// vite.config.js
import { defineConfig } from 'vite';
import phpPlugin from '@symfony/vite-php-adapter';
export default defineConfig({
plugins: [phpPlugin()],
build: {
outDir: 'public/assets/vite-build', // 指定输出目录
rollupOptions: {
input: 'src/main.js', // 入口文件
},
},
});
// src/main.js
import './components/Button.js'; // 导入组件目录
import './components/Modal.js';
// 应用初始化逻辑
document.addEventListener('DOMContentLoaded', () => {
console.log('Vite app loaded with components');
});
执行 npm run build 后，组件代码将输出至 public/assets/vite-build/。验证步骤：打开浏览器控制台，检查是否有组件相关日志；查看网络请求，确认 index.html 引入了正确的构建文件。若组件缺失，检查 input 路径是否包含组件导入，以及 outDir 权限是否允许写入。注意 Vite 要求路径使用 ES 模块格式，避免 CommonJS 语法冲突。
当组件目录包含未使用的导出时，如何避免打包冗余代码？
当组件目录中存在未使用的导出时，可通过 Tree Shaking 机制自动剔除无用代码，但需确保模块使用 ES 模块语法（import/export）。在 Webpack 或 Vite 中，默认启用 Tree Shaking，只要入口文件未引用特定导出，相关代码就不会被打包。例如，若 Button.js 导出多个函数，但仅导入其中一个，其余将被优化掉。关键点是避免使用动态导入或全局变量，这会阻碍静态分析。
// assets/js/components/Button.js
export function render() { /* 实际使用 */ }
export function unused() { /* 未被导入，将被剔除 */ }
// assets/js/app.js
import { render } from '../js/components/Button'; // 仅导入 render
render(); // 调用唯一需要的函数
// 运行 yarn encore dev 后，public/build/app.js 不包含 unused 函数
验证方法：比较打包前后文件大小，或使用 webpack-bundle-analyzer 检查树状图。若发现冗余代码，检查导入语句是否精确，避免 import * as Button 这种通配符写法。对于 Vite，同样适用此规则，因其基于 Rollup 实现 Tree Shaking。确保所有模块使用 ES 模块标准，以最大化优化效果。
