我在配置 Vue 以编译音频工作集时遇到问题。这基本上是 this issue, which is already solved,但使用 Typescript 而不是 JavaScript。我的想法是在解析 ts-loader
文件时将 *.worklet.ts
放在 worklet-loader
之前,这样工作集首先被编译为 JavaScript,然后工作集加载器可以解析它。由于某种原因,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 解析我的工作集。
答案 0 :(得分:0)
我通过深入研究 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"]
}
```