Node.js

Motion Canvas 构建在 Vite 插件系统之上。要创建在 Node.js 上运行的插件，您只需创建一个 [Vite plugin][vite-plugin] 并在 vite.config.ts 文件中导入它。除此之外，@motion-canvas/vite-plugin 提供了一个符号，让您可以定义特定于 motion-canvas 的选项。

让我们首先为我们的插件创建一个文件。这次我们将它放在我们项目的根目录中，因为 Vite 插件不是运行时源代码的一部分。

我们使用 Vite [configureServer][vite-configure-server] 钩子来添加自定义端点。同时，entryPoint 选项让我们指定运行时插件的路径：

Project structure
  project/
  ├── src/
  │   ├── scenes/
  │   │   └── example.tsx
  │   ├── plugin.ts
  │   └── project.ts
  ├── package.json
  ├── tsconfig.json
+ ├── myVitePlugin.ts
  └── vite.config.ts

myVitePlugin.ts
import {Plugin, PLUGIN_OPTIONS} from '@motion-canvas/vite-plugin';

export default function myVitePlugin(): Plugin {
  return {
    name: 'vite-plugin-motion-canvas-example',

    // 使用 Vite 插件钩子扩展开发服务器：
    configureServer(server) {
      server.middlewares.use('/my-plugin', (req, res) => {
        res.end('Hello from my plugin!');
      });
    },

    // 扩展 Motion Canvas：
    [PLUGIN_OPTIONS]: {
      entryPoint: './plugin.ts',
    },
  };
}

以下是我们如何在 vite.config.ts 文件中导入这样的插件：

vite.config.ts
import {defineConfig} from 'vite';
import motionCanvas from '@motion-canvas/vite-plugin';
import myVitePlugin from './myVitePlugin';

export default defineConfig({
  plugins: [
    motionCanvas(),
    myVitePlugin(),
  ],
});