Next.js 13项目中单独编译打包Web Audio API Worklet文件求助

步骤1：安装依赖 #

首先安装glob用于批量匹配Worklet文件：

npm install glob --save-dev
# 或者
yarn add glob -D

步骤2：修改next.config.js配置 #

替换你现有的webpack配置，以下是完整可运行的配置：

const glob = require('glob');
const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 仅在客户端打包时处理Worklet
    if (!isServer) {
      // 获取所有Worklet文件
      const workletEntries = glob.sync('./src/worklets/*.ts').reduce((entries, filePath) => {
        // 提取文件名作为入口名称，比如src/worklets/foo.ts => foo
        const entryName = path.basename(filePath, '.ts');
        entries[`worklets/${entryName}`] = filePath;
        return entries;
      }, {});

      // 合并原有入口与Worklet入口
      const originalEntry = config.entry;
      config.entry = async () => {
        const entries = await originalEntry();
        return {
          ...entries,
          ...workletEntries,
        };
      };

      // 配置Worklet文件的输出规则
      config.output.filename = (pathData) => {
        // 对Worklet入口单独设置输出路径，输出到public/worklets目录
        if (pathData.chunk.name?.startsWith('worklets/')) {
          return 'worklets/[name].js';
        }
        // 其他文件沿用Next.js默认输出规则
        return config.output.filename;
      };

      // 确保Worklet文件使用正确的TS编译规则，排除Next.js的默认模块处理
      config.module.rules.push({
        test: /src\/worklets\/.*\.ts$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: path.resolve(__dirname, 'tsconfig.json'),
              // 禁用类型检查以加快编译，可选
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/,
      });
    }

    return config;
  },
};

module.exports = nextConfig;

关键配置说明 #

• 入口处理：通过glob批量读取src/worklets下的所有.ts文件，生成独立的webpack入口，命名格式为worklets/文件名。
• 输出配置：指定Worklet编译后的文件输出到public/worklets目录，这样可以通过/worklets/文件名.js的URL直接访问。
• 模块规则：为Worklet文件单独配置ts-loader，确保编译后的代码符合Web Audio Worklet的运行要求，避免和Next.js的React相关编译规则冲突。

客户端加载Worklet示例 #

在React组件中加载Worklet：

import { useEffect } from 'react';

const AudioComponent = () => {
  useEffect(() => {
    const initWorklet = async () => {
      const audioContext = new AudioContext();
      // 加载编译后的Worklet文件
      await audioContext.audioWorklet.addModule('/worklets/your-worklet-file.js');
      // 后续逻辑：创建WorkletNode等
    };

    initWorklet();
  }, []);

  return <div>Audio Worklet Demo</div>;
};

export default AudioComponent;

注意事项 #

• 确保你的tsconfig.json配置支持编译到兼容Web Audio Worklet的ES版本（比如target: ES2017）。
• Worklet文件中不能使用React、Next.js的API或其他浏览器环境未直接支持的特性，需保持代码独立。

内容的提问来源于stack exchange，提问作者v0rs4