用 cra-template-particles 快速搭建带 tsParticles 粒子特效的 React 应用Create React App 官方模板完全指南【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles本文以 templates/react/README.md 为核心文档结合 templates/react 模板目录、wrappers/react/README.md 以及模板源码展开讲解帮助读者掌握如何通过 Create React AppCRA官方模板cra-template-particles在数秒内初始化一个自带可交互粒子背景的 React 项目并深入理解模板生成的目录结构、particles.json配置项与ParticlesProvider初始化机制进而能够独立完成粒子特效的定制。一、模板是什么为 React tsParticles 定制的 CRA 官方模板cra-template-particles是 tsParticles 项目为 React 官方维护的 Create React App 模板位于仓库的 templates/react 目录。它把「创建一个 CRA 应用」和「集成 React tsParticles 组件」两个步骤合并为一步使用该模板初始化项目后你会得到一个开箱即用、带有全屏粒子背景动画的 React 应用。从 templates/react/package.json 可以看出该模板包的元信息包括包名cra-template-particles版本与 tsParticles 主版本保持同步当前仓库内为4.3.3描述为 Official React tsParticles template发布内容files仅包含template目录与template.json两个部分其中template/是真正会拷贝到用户新项目中的脚手架文件template.json负责声明新项目默认安装的依赖发布前的build脚本会执行 templates/react/scripts/prebuild.js把 monorepo 工作区中的workspace:*依赖版本解析成具体版本号再写入template.json从而保证用户通过 npm/yarn 安装模板时拿到的是可解析的真实版本。需要特别留意的是templates/react/package.json 中同时标注了该包的deprecated状态由于 Create React App 本身已停止维护官方建议改用tsparticles/template-scaffold并通过npm create tsparticles使用基于 Vite 的新模板。因此本文讲解的 CRA 模板适用于仍然基于 Create React App 的存量项目或教学场景新项目更推荐使用官方新的 Vite 脚手架流程。二、三步上手用一条命令生成带粒子的 React 应用根据 templates/react/README.md使用该模板创建项目非常简单。在安装好 Node.js 与 npm或 yarn的前提下执行以下任意一条命令npx create-react-app my-app --template particles # 或者使用 yarn yarn create react-app my-app --template particles其中my-app是你要创建的项目目录名--template particles指定使用cra-template-particles模板。README 同时说明如果不显式指定模板例如省略--template参数该模板会被作为默认模板使用。命令执行完毕后进入项目目录并启动开发服务器cd my-app npm start浏览器访问http://localhost:3000即可看到粒子动画背景。整个流程无需手动安装tsparticles/react、编写初始化代码或配置粒子参数——模板已经替你完成了这一切。三、生成的模板项目结构每一个文件的作用通过--template particles创建的项目其源文件来自仓库中的 templates/react/template 目录。与普通 CRA 模板相比差异集中在src目录src/ ├── App.css # 应用样式含粒子层叠样式 ├── App.js # 根组件挂载 Particles 并渲染页面内容 ├── App.test.js # 默认的 React 测试渲染 learn react 链接 ├── index.css ├── index.js # 入口用 ParticlesProvider 包裹根组件 ├── logo.svg ├── particles.json # ★ tsParticles 粒子配置模板的核心 ├── serviceWorker.js # CRA 默认的 PWA Service Worker └── setupTests.js模板在 templates/react/template.json 中为新建项目预置了如下依赖{ package: { dependencies: { tsparticles/react: ^4.3.3, tsparticles/engine: ^4.3.3, tsparticles: ^4.3.3, tslib: ^2.8.1 } } }tsparticles/reactReact 组件封装提供Particles与ParticlesProvidertsparticles/enginetsParticles 核心引擎提供Engine、Container、ISourceOptions等类型与运行时tsparticles完整功能 bundleloadFull模板用它注册全部粒子功能tslibTypeScript 运行时辅助库。在 monorepo 构建时这些版本号由 scripts/prebuild.js 从 wrappers/react/package.json、engine/package.json 与 bundles/full/package.json 中读取并回填保证模板与主仓库版本严格一致。3.1 入口文件ParticlesProvider 与引擎初始化template/src/index.js 展示了模板的正确挂载方式import React from react; import ReactDOM from react-dom/client; import ./index.css; import App from ./App; import * as serviceWorker from ./serviceWorker; import { ParticlesProvider } from tsparticles/react; import { registerParticles } from ./particlesInit; const root ReactDOM.createRoot(document.getElementById(root)); root.render( React.StrictMode ParticlesProvider init{registerParticles} App / /ParticlesProvider /React.StrictMode ); serviceWorker.unregister();这里的关键是ParticlesProvider init{registerParticles}ParticlesProvider接收一个异步init回调该回调在应用生命周期内只执行一次负责向引擎注册所需的插件/功能模块根据 wrappers/react/README.md 的说明ParticlesProvider应放在应用的根节点如index.jsx、main.tsx不要放进会条件挂载/卸载的组件中否则引擎初始化可能只在首次生效导致后续重新挂载时容器管理异常registerParticles的典型实现可在 demo/react/src/particlesInit.js 中看到通过import(tsparticles/slim)动态加载loadSlim并执行loadSlim(engine)。模板项目因依赖中预置了完整的tsparticlesbundle其初始化逻辑对应使用loadFull注册全部功能这也是模板在 template.json 中同时包含tsparticles的原因。3.2 根组件以 options 方式挂载 Particlestemplate/src/App.js 是最简用法示例import React from react; import Particles from tsparticles/react; import logo from ./logo.svg; import ./App.css; import particlesOptions from ./particles.json; function App() { return ( div classNameApp Particles options{particlesOptions}/ header classNameApp-header img src{logo} classNameApp-logo altlogo/ p Edit codesrc/App.js/code and save to reload. /p p Edit codesrc/particles.json/code to customize Particles, then save to reload. /p ... /header /div ); } export default App;模板采用「Options 对象」方式将粒子配置抽离到独立的 particles.json通过import particlesOptions from ./particles.json引入再以Particles options{particlesOptions}/传入。这样粒子参数与组件代码完全解耦——修改特效只需编辑 JSON保存后热更新即可生效无需改动业务组件。根据 wrappers/react/README.mdParticles组件还支持以下常用 propsProp类型说明idstring粒子画布元素的 idoptionsobject粒子实例的配置对象urlstring远程配置地址组件会通过 AJAX 请求加载styleobject画布元素的行内样式classNamestring画布容器的 class 名particlesLoadedfunction容器加载完成后的回调接收(container?: Container)也就是说除了模板演示的options方式你还可以使用Particles urlhttps://example.com/particles.json/从远程加载配置两种方式都受支持。四、particles.json 逐项详解模板默认粒子效果的完整配置template/src/particles.json 是模板的核心配置下面逐段解释每一项的作用与取值含义方便直接修改复用{ background: { color: #282c34 }, interactivity: { events: { onClick: { enable: true, mode: push }, onHover: { enable: true, mode: repulse }, resize: true }, modes: { push: { quantity: 4 }, repulse: { distance: 200, duration: 0.4 } } }, particles: { color: { value: #ffffff }, links: { color: #ffffff, distance: 150, enable: true, opacity: 0.5, width: 1 }, collisions: { enable: true }, move: { direction: none, enable: true, outModes: { default: bounce }, random: false, speed: 6, straight: false }, number: { density: { enable: true }, value: 80 }, opacity: { value: 0.5 }, shape: { type: circle }, size: { random: true, value: 5 } } }4.1 background背景颜色background.color设置为#282c34Create React App 默认的深蓝灰背景色粒子层会覆盖在整个应用背景上与 CRA 初始页面的配色保持一致。4.2 particles.number粒子数量value: 80画布中初始粒子数为 80 个density.enable: true开启密度自适应粒子数量会依据画布面积自动调整屏幕越大粒子越多保证视觉密度均匀。4.3 particles.shape粒子形状type: circle表示粒子为圆形。tsParticles 支持多种形状如square、star、heart、emoji及自定义 Path 等修改此处即可切换外观。4.4 particles.size粒子大小value: 5基础尺寸为 5pxrandom: true尺寸在基础值上下随机分布形成大小错落的层次感。4.5 particles.color粒子颜色value: #ffffff为白色粒子与深色背景形成高对比度。4.6 particles.opacity透明度value: 0.5粒子半透明显示叠加后更有朦胧的层次感。4.7 particles.links粒子连线links是模板默认效果的核心视觉元素enable: true开启粒子之间的连线color: #ffffff连线颜色为白色distance: 150距离小于 150px 的粒子对之间才会绘制连线opacity: 0.5连线透明度width: 1连线宽度 1px。4.8 particles.move运动与边界行为enable: true粒子持续运动speed: 6移动速度direction: none方向随机无固定朝向straight: false粒子不沿直线运动配合 random 方向产生自然游走random: false速度不随机化outModes.default: bounce粒子运动到画布边缘时反弹回画布内而不是被清除或消失。4.9 particles.collisions粒子碰撞collisions.enable: true开启粒子间的物理碰撞避免粒子互相穿过重叠。4.10 interactivity交互响应交互配置分为events触发事件与modes触发后执行的行为onClick.enable: truemode: push点击画布时新增粒子modes.push.quantity: 4表示每次点击追加 4 个粒子——这是一个非常直观的点击爆粒子交互onHover.enable: truemode: repulse鼠标悬停时粒子被推开modes.repulse.distance: 200为排斥作用半径duration: 0.4为排斥效果持续时间秒resize: true窗口尺寸变化时自动重绘画布与粒子布局。4.11 与官方示例配置的对照将模板的particles.json与 wrappers/react/README.md 中给出的 JS/TS 内联配置示例对比可以发现二者在参数结构上完全一致背景色、fpsLimit、detectRetina、interactivity、particles等区别仅在于模板使用独立 JSON 文件承载配置内联示例使用useMemo(() ({...}), [])保证 options 引用稳定避免组件重复创建实例并额外提供了fpsLimit: 120帧率上限与detectRetina: true视网膜屏高清渲染两个全局选项可作为升级模板配置时的参考内联示例中的size.value写成{ min: 1, max: 5 }区间形式等价于模板size.random: true, value: 5的随机效果可见同一效果有等价写法。五、新建项目中的可用脚本来自模板 README模板随 CRA 自带的标准脚本详见 template/README.mdnpm start启动开发服务器默认地址http://localhost:3000代码保存后自动热更新控制台会显示 lint 错误npm test以交互监听模式运行测试模板自带 App.test.js验证首页能渲染出 learn react 链接npm run build生产构建输出到build目录产物经过压缩并带内容哈希文件名可直接部署npm run eject弹出 CRA 内部配置webpack、Babel、ESLint 等此操作不可逆模板 README 明确建议非必要不执行。六、自定义与迁移建议6.1 修改粒子效果的三条路径基于模板生成的工程定制特效有且不限于以下三种方式直接编辑src/particles.json改颜色、数量、速度、连线距离、交互行为等保存即热更新模板 App.js 中的提示文案也是这么引导的改用内联 Options 对象参照 wrappers/react/README.md 中的useMemo写法把配置写在组件内便于使用 TypeScript 类型ISourceOptions获得编译期校验或引用MoveDirection、OutMode等枚举常量切换加载的 bundle模板默认通过tsparticlesloadFull注册全部功能若只需基础效果可在particlesInit中改用loadSlim来自tsparticles/slim或loadBasic来自tsparticles/basic减小最终打包体积。6.2 面向新项目的迁移路径由于 Create React App 已停止维护templates/react/package.json 明确标注该模板为废弃状态deprecated官方推荐新项目改用tsparticles/template-scaffold通过npm create tsparticles使用基于 Vite 的模板仓库 templates/scaffold 即对应脚手架资源。对于存量 CRA 项目迁移的核心工作就是把ParticlesProviderParticles组件、引擎初始化函数以及particles.json配置迁移到新的 Vite 工程结构中——这三部分逻辑与框架无关配置可以原样复用。七、小结cra-template-particles把「创建 React 应用 集成 tsParticles」压缩为一条命令npx create-react-app my-app --template particles。模板通过 template.json 预置tsparticles/react、tsparticles/engine与tsparticles依赖通过 particles.json 提供一份带点击 push、悬停 repulse、粒子连线与碰撞的完整默认配置再配合ParticlesProvider init{...}的一次性引擎初始化机制让开发者拿到项目即可运行、改 JSON 即可换效果。理解本文的配置逐项释义与源码调用链后无论是继续在 CRA 中深度定制还是迁移到基于 Vite 的新脚手架都能做到心中有数。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 cra-template-particles 快速搭建带 tsParticles 粒子特效的 React 应用：Create React App 官方模板完全指南
用 cra-template-particles 快速搭建带 tsParticles 粒子特效的 React 应用Create React App 官方模板完全指南【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles本文以 templates/react/README.md 为核心文档结合 templates/react 模板目录、wrappers/react/README.md 以及模板源码展开讲解帮助读者掌握如何通过 Create React AppCRA官方模板cra-template-particles在数秒内初始化一个自带可交互粒子背景的 React 项目并深入理解模板生成的目录结构、particles.json配置项与ParticlesProvider初始化机制进而能够独立完成粒子特效的定制。一、模板是什么为 React tsParticles 定制的 CRA 官方模板cra-template-particles是 tsParticles 项目为 React 官方维护的 Create React App 模板位于仓库的 templates/react 目录。它把「创建一个 CRA 应用」和「集成 React tsParticles 组件」两个步骤合并为一步使用该模板初始化项目后你会得到一个开箱即用、带有全屏粒子背景动画的 React 应用。从 templates/react/package.json 可以看出该模板包的元信息包括包名cra-template-particles版本与 tsParticles 主版本保持同步当前仓库内为4.3.3描述为 Official React tsParticles template发布内容files仅包含template目录与template.json两个部分其中template/是真正会拷贝到用户新项目中的脚手架文件template.json负责声明新项目默认安装的依赖发布前的build脚本会执行 templates/react/scripts/prebuild.js把 monorepo 工作区中的workspace:*依赖版本解析成具体版本号再写入template.json从而保证用户通过 npm/yarn 安装模板时拿到的是可解析的真实版本。需要特别留意的是templates/react/package.json 中同时标注了该包的deprecated状态由于 Create React App 本身已停止维护官方建议改用tsparticles/template-scaffold并通过npm create tsparticles使用基于 Vite 的新模板。因此本文讲解的 CRA 模板适用于仍然基于 Create React App 的存量项目或教学场景新项目更推荐使用官方新的 Vite 脚手架流程。二、三步上手用一条命令生成带粒子的 React 应用根据 templates/react/README.md使用该模板创建项目非常简单。在安装好 Node.js 与 npm或 yarn的前提下执行以下任意一条命令npx create-react-app my-app --template particles # 或者使用 yarn yarn create react-app my-app --template particles其中my-app是你要创建的项目目录名--template particles指定使用cra-template-particles模板。README 同时说明如果不显式指定模板例如省略--template参数该模板会被作为默认模板使用。命令执行完毕后进入项目目录并启动开发服务器cd my-app npm start浏览器访问http://localhost:3000即可看到粒子动画背景。整个流程无需手动安装tsparticles/react、编写初始化代码或配置粒子参数——模板已经替你完成了这一切。三、生成的模板项目结构每一个文件的作用通过--template particles创建的项目其源文件来自仓库中的 templates/react/template 目录。与普通 CRA 模板相比差异集中在src目录src/ ├── App.css # 应用样式含粒子层叠样式 ├── App.js # 根组件挂载 Particles 并渲染页面内容 ├── App.test.js # 默认的 React 测试渲染 learn react 链接 ├── index.css ├── index.js # 入口用 ParticlesProvider 包裹根组件 ├── logo.svg ├── particles.json # ★ tsParticles 粒子配置模板的核心 ├── serviceWorker.js # CRA 默认的 PWA Service Worker └── setupTests.js模板在 templates/react/template.json 中为新建项目预置了如下依赖{ package: { dependencies: { tsparticles/react: ^4.3.3, tsparticles/engine: ^4.3.3, tsparticles: ^4.3.3, tslib: ^2.8.1 } } }tsparticles/reactReact 组件封装提供Particles与ParticlesProvidertsparticles/enginetsParticles 核心引擎提供Engine、Container、ISourceOptions等类型与运行时tsparticles完整功能 bundleloadFull模板用它注册全部粒子功能tslibTypeScript 运行时辅助库。在 monorepo 构建时这些版本号由 scripts/prebuild.js 从 wrappers/react/package.json、engine/package.json 与 bundles/full/package.json 中读取并回填保证模板与主仓库版本严格一致。3.1 入口文件ParticlesProvider 与引擎初始化template/src/index.js 展示了模板的正确挂载方式import React from react; import ReactDOM from react-dom/client; import ./index.css; import App from ./App; import * as serviceWorker from ./serviceWorker; import { ParticlesProvider } from tsparticles/react; import { registerParticles } from ./particlesInit; const root ReactDOM.createRoot(document.getElementById(root)); root.render( React.StrictMode ParticlesProvider init{registerParticles} App / /ParticlesProvider /React.StrictMode ); serviceWorker.unregister();这里的关键是ParticlesProvider init{registerParticles}ParticlesProvider接收一个异步init回调该回调在应用生命周期内只执行一次负责向引擎注册所需的插件/功能模块根据 wrappers/react/README.md 的说明ParticlesProvider应放在应用的根节点如index.jsx、main.tsx不要放进会条件挂载/卸载的组件中否则引擎初始化可能只在首次生效导致后续重新挂载时容器管理异常registerParticles的典型实现可在 demo/react/src/particlesInit.js 中看到通过import(tsparticles/slim)动态加载loadSlim并执行loadSlim(engine)。模板项目因依赖中预置了完整的tsparticlesbundle其初始化逻辑对应使用loadFull注册全部功能这也是模板在 template.json 中同时包含tsparticles的原因。3.2 根组件以 options 方式挂载 Particlestemplate/src/App.js 是最简用法示例import React from react; import Particles from tsparticles/react; import logo from ./logo.svg; import ./App.css; import particlesOptions from ./particles.json; function App() { return ( div classNameApp Particles options{particlesOptions}/ header classNameApp-header img src{logo} classNameApp-logo altlogo/ p Edit codesrc/App.js/code and save to reload. /p p Edit codesrc/particles.json/code to customize Particles, then save to reload. /p ... /header /div ); } export default App;模板采用「Options 对象」方式将粒子配置抽离到独立的 particles.json通过import particlesOptions from ./particles.json引入再以Particles options{particlesOptions}/传入。这样粒子参数与组件代码完全解耦——修改特效只需编辑 JSON保存后热更新即可生效无需改动业务组件。根据 wrappers/react/README.mdParticles组件还支持以下常用 propsProp类型说明idstring粒子画布元素的 idoptionsobject粒子实例的配置对象urlstring远程配置地址组件会通过 AJAX 请求加载styleobject画布元素的行内样式classNamestring画布容器的 class 名particlesLoadedfunction容器加载完成后的回调接收(container?: Container)也就是说除了模板演示的options方式你还可以使用Particles urlhttps://example.com/particles.json/从远程加载配置两种方式都受支持。四、particles.json 逐项详解模板默认粒子效果的完整配置template/src/particles.json 是模板的核心配置下面逐段解释每一项的作用与取值含义方便直接修改复用{ background: { color: #282c34 }, interactivity: { events: { onClick: { enable: true, mode: push }, onHover: { enable: true, mode: repulse }, resize: true }, modes: { push: { quantity: 4 }, repulse: { distance: 200, duration: 0.4 } } }, particles: { color: { value: #ffffff }, links: { color: #ffffff, distance: 150, enable: true, opacity: 0.5, width: 1 }, collisions: { enable: true }, move: { direction: none, enable: true, outModes: { default: bounce }, random: false, speed: 6, straight: false }, number: { density: { enable: true }, value: 80 }, opacity: { value: 0.5 }, shape: { type: circle }, size: { random: true, value: 5 } } }4.1 background背景颜色background.color设置为#282c34Create React App 默认的深蓝灰背景色粒子层会覆盖在整个应用背景上与 CRA 初始页面的配色保持一致。4.2 particles.number粒子数量value: 80画布中初始粒子数为 80 个density.enable: true开启密度自适应粒子数量会依据画布面积自动调整屏幕越大粒子越多保证视觉密度均匀。4.3 particles.shape粒子形状type: circle表示粒子为圆形。tsParticles 支持多种形状如square、star、heart、emoji及自定义 Path 等修改此处即可切换外观。4.4 particles.size粒子大小value: 5基础尺寸为 5pxrandom: true尺寸在基础值上下随机分布形成大小错落的层次感。4.5 particles.color粒子颜色value: #ffffff为白色粒子与深色背景形成高对比度。4.6 particles.opacity透明度value: 0.5粒子半透明显示叠加后更有朦胧的层次感。4.7 particles.links粒子连线links是模板默认效果的核心视觉元素enable: true开启粒子之间的连线color: #ffffff连线颜色为白色distance: 150距离小于 150px 的粒子对之间才会绘制连线opacity: 0.5连线透明度width: 1连线宽度 1px。4.8 particles.move运动与边界行为enable: true粒子持续运动speed: 6移动速度direction: none方向随机无固定朝向straight: false粒子不沿直线运动配合 random 方向产生自然游走random: false速度不随机化outModes.default: bounce粒子运动到画布边缘时反弹回画布内而不是被清除或消失。4.9 particles.collisions粒子碰撞collisions.enable: true开启粒子间的物理碰撞避免粒子互相穿过重叠。4.10 interactivity交互响应交互配置分为events触发事件与modes触发后执行的行为onClick.enable: truemode: push点击画布时新增粒子modes.push.quantity: 4表示每次点击追加 4 个粒子——这是一个非常直观的点击爆粒子交互onHover.enable: truemode: repulse鼠标悬停时粒子被推开modes.repulse.distance: 200为排斥作用半径duration: 0.4为排斥效果持续时间秒resize: true窗口尺寸变化时自动重绘画布与粒子布局。4.11 与官方示例配置的对照将模板的particles.json与 wrappers/react/README.md 中给出的 JS/TS 内联配置示例对比可以发现二者在参数结构上完全一致背景色、fpsLimit、detectRetina、interactivity、particles等区别仅在于模板使用独立 JSON 文件承载配置内联示例使用useMemo(() ({...}), [])保证 options 引用稳定避免组件重复创建实例并额外提供了fpsLimit: 120帧率上限与detectRetina: true视网膜屏高清渲染两个全局选项可作为升级模板配置时的参考内联示例中的size.value写成{ min: 1, max: 5 }区间形式等价于模板size.random: true, value: 5的随机效果可见同一效果有等价写法。五、新建项目中的可用脚本来自模板 README模板随 CRA 自带的标准脚本详见 template/README.mdnpm start启动开发服务器默认地址http://localhost:3000代码保存后自动热更新控制台会显示 lint 错误npm test以交互监听模式运行测试模板自带 App.test.js验证首页能渲染出 learn react 链接npm run build生产构建输出到build目录产物经过压缩并带内容哈希文件名可直接部署npm run eject弹出 CRA 内部配置webpack、Babel、ESLint 等此操作不可逆模板 README 明确建议非必要不执行。六、自定义与迁移建议6.1 修改粒子效果的三条路径基于模板生成的工程定制特效有且不限于以下三种方式直接编辑src/particles.json改颜色、数量、速度、连线距离、交互行为等保存即热更新模板 App.js 中的提示文案也是这么引导的改用内联 Options 对象参照 wrappers/react/README.md 中的useMemo写法把配置写在组件内便于使用 TypeScript 类型ISourceOptions获得编译期校验或引用MoveDirection、OutMode等枚举常量切换加载的 bundle模板默认通过tsparticlesloadFull注册全部功能若只需基础效果可在particlesInit中改用loadSlim来自tsparticles/slim或loadBasic来自tsparticles/basic减小最终打包体积。6.2 面向新项目的迁移路径由于 Create React App 已停止维护templates/react/package.json 明确标注该模板为废弃状态deprecated官方推荐新项目改用tsparticles/template-scaffold通过npm create tsparticles使用基于 Vite 的模板仓库 templates/scaffold 即对应脚手架资源。对于存量 CRA 项目迁移的核心工作就是把ParticlesProviderParticles组件、引擎初始化函数以及particles.json配置迁移到新的 Vite 工程结构中——这三部分逻辑与框架无关配置可以原样复用。七、小结cra-template-particles把「创建 React 应用 集成 tsParticles」压缩为一条命令npx create-react-app my-app --template particles。模板通过 template.json 预置tsparticles/react、tsparticles/engine与tsparticles依赖通过 particles.json 提供一份带点击 push、悬停 repulse、粒子连线与碰撞的完整默认配置再配合ParticlesProvider init{...}的一次性引擎初始化机制让开发者拿到项目即可运行、改 JSON 即可换效果。理解本文的配置逐项释义与源码调用链后无论是继续在 CRA 中深度定制还是迁移到基于 Vite 的新脚手架都能做到心中有数。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考