[英]How to compile TypeScript files to JavaScript using Vue.js
I'm trying to compile TypeScript
files into JavaScript
files using tsconfig.json
file.我正在尝试使用
tsconfig.json
文件将TypeScript
文件编译成JavaScript
文件。 The tsconfig.json
files is: tsconfig.json
文件是:
{
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"allowJs": true,
"outDir": "./build",
"strict": true,
"esModuleInterop": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.test.ts"
]
}
The above configs work fine and create compiled JavaScript
files in the build folder.上述配置工作正常,并在构建文件夹中创建编译的
JavaScript
文件。 If I use node run index.js
inside the build
folder, it also works fine.如果我在
build
文件夹中使用node run index.js
,它也可以正常工作。 But if I import the index.js
file from the build
folder into vue
component, it does not work and throws the following error:但是如果我将
build
文件夹中的index.js
文件导入到vue
组件中,它就不起作用并抛出以下错误:
Uncaught ReferenceError: exports is not defined
I tried to fix by adding:我试图通过添加来修复:
"allowSyntheticDefaultImports": true
but no luck.但没有运气。 I also tried the recommended config from official docs:
我还尝试了官方文档中推荐的配置:
{
"compilerOptions": {
"target": "es5",
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"outDir": "./test-app/src/assets/js"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.test.ts"
]
}
it throws the following error:它引发以下错误:
TypeError: fs.existsSync is not a function
I'm already requiring fs
in ts
file.我已经在
ts
文件中需要fs
了。
The goal is to use compiled JavaScript
files into Vue.js
app.目标是使用已编译的
JavaScript
文件到Vue.js
应用程序中。 can anybody help me out what I'm missing in tsconfig.json
file?任何人都可以帮助我解决
tsconfig.json
文件中缺少的内容吗? or is there anyother way to compile ts
into js
using vue.js
?或者还有其他方法可以使用
vue.js
将ts
编译成js
吗? many thanks.非常感谢。
Short answer: Change the target and module to "esnext"简短回答:将目标和模块更改为“esnext”
{
"compilerOptions": {
"target": "esnext",
"strict": true,
"module": "esnext",
"moduleResolution": "node",
"outDir": "./test-app/src/assets/js"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.test.ts"
]
}
However, I would not recommend importing built files in your.vue component, as you need to constantly build them for them to be updated.但是,我不建议在 your.vue 组件中导入构建文件,因为您需要不断构建它们以更新它们。 Here is a page from the vue.js doc on how to integrate typescript: https://v2.vuejs.org/v2/guide/typescript.html
Here is a page from the vue.js doc on how to integrate typescript: https://v2.vuejs.org/v2/guide/typescript.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.