[英]Vue with Typescript and Audio Worklets
I am having trouble configuring Vue to compile audio worklets.我在配置 Vue 以编译音频工作集时遇到问题。 This is basically this issue, which is already solved , but with Typescript instead of JavaScript.
这基本上是这个问题,已经解决了,但是用 Typescript 而不是 JavaScript。 My idea was to put
ts-loader
before the worklet-loader
when parsing *.worklet.ts
files, so that the worklet is first compiled down to JavaScript and then the worklet loader can parse it.我的想法是在解析
*.worklet.ts
文件时将ts-loader
放在worklet-loader
loader 之前,以便首先将 worklet 编译为 JavaScript ,然后 worklet loader 才能对其进行解析。 TypeScript does not emit any output for some reason: TypeScript 不发出任何 output 出于某种原因:
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
This is my vue.config.js
:这是我的
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",
},
},
],
},
],
},
},
};
At the moment, TypeScript does not not fully support Audio Worklets , which is why I included the suggested definitions into my project for TypeScript to parse my worklet.目前, TypeScript 不完全支持 Audio Worklets ,这就是为什么我将建议的定义包含在我的项目中,以便 TypeScript 解析我的工作集。
I fixed the issue by digging into the Weboack documentation.我通过深入研究 Weboack 文档解决了这个问题。 Loaders are applied in reverse array order.
加载器以相反的数组顺序应用。 This is a working
vue.config.js
:这是一个有效的
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
: 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"]
}
```
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.