带有 Typescript 和 Audio Worklet 的 Vue

Question

我在配置 Vue 以编译音频工作集时遇到问题。这基本上是this issue, which is already solved，但使用的是 Typescript 而不是 JavaScript。我的想法是在解析*.worklet.ts文件时将ts-loader放在worklet-loader之前，这样worklet首先被编译成JavaScript，然后worklet加载器可以解析它。由于某种原因，TypeScript 不会发出任何输出：

 ERROR  Failed to compile with 1 error                                                                                                                                                     20:37:39
 error  in ./src/window.worklet.ts

Syntax Error: Error: TypeScript emitted no output for D:\(...)\equalizer\src\window.worklet.ts.


 @ ./src/visualizer.ts 44:0-50 45:12-30
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/TabVisuals.vue?vue&type=script&lang=ts
 @ ./src/components/TabVisuals.vue?vue&type=script&lang=ts
 @ ./src/components/TabVisuals.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=ts
 @ ./src/App.vue?vue&type=script&lang=ts
 @ ./src/App.vue
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://(...):8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

这是我的vue.config.js：

module.exports = {
    css: {
        loaderOptions: {
            sass: {},
        },
    },
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.worklet\.tsx?$/i,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: "ts-loader",
                            options: { projectReferences: true },
                        },
                        {
                            loader: "worklet-loader",
                            options: {
                                name: "js/[hash].worklet",
                            },
                        },
                    ],
                },
            ],
        },
    },
};

目前，TypeScript does not not fully support Audio Worklets，这就是为什么我将建议的定义包含在我的项目中，以便 TypeScript 解析我的工作集。

Answer 1

我通过深入研究 Weboack 文档解决了这个问题。加载器以相反的数组顺序应用。这是一个有效的vue.config.js：

module.exports = {
    css: {
        loaderOptions: {
            sass: {},
        },
    },
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.worklet\.ts$/i,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: "worklet-loader",
                            options: {
                                name: "js/[hash].worklet.js",
                            },
                        },
                        {
                            loader: "ts-loader",
                            options: {
                                configFile: "tsconfig.worklet.json",
                            },
                        },
                    ],
                },
            ],
        },
    },
};

tsconfig.worklet.json:

{
    "compilerOptions": {
        "target": "ES2018",
        "module": "esnext",
        "strict": true,
        "importHelpers": true,
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "sourceMap": true,
        "baseUrl": ".",
        "types": ["webpack-env"],
        "paths": {
            "@/*": ["src/*"]
        },
        "lib": ["esnext", "scripthost"]
    },
    "include": ["src/**/*.worklet.ts"],
    "exclude": ["node_modules"]
}
```