javascript - 如何使用 Vue.js 将 TypeScript 文件编译为 JavaScript

Question

我正在尝试使用文件将文件编译TypeScript成文件。这些文件是：JavaScripttsconfig.jsontsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "allowJs": true,
    "outDir": "./build",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts"
  ]
}

上述配置工作正常，并JavaScript在构建文件夹中创建编译文件。如果我在文件夹node run index.js内使用build，它也可以正常工作。但是，如果我将index.js文件build夹中的文件导入到vue组件中，它将不起作用并引发以下错误：

Uncaught ReferenceError: exports is not defined

我试图通过添加来修复：

"allowSyntheticDefaultImports": true

但没有运气。我还尝试了官方文档中推荐的配置：

{
  "compilerOptions": {
    "target": "es5",
    "strict": true,
    "module": "es2015",
    "moduleResolution": "node",
    "outDir": "./test-app/src/assets/js"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts"
  ]
}

它引发以下错误：

TypeError: fs.existsSync is not a function

我已经要求fs在ts文件中。

目标是在 app.xml 中使用已编译的JavaScript文件Vue.js。任何人都可以帮我解决我在tsconfig.json文件中遗漏的内容吗？还是有其他方法可以编译ts成jsusing vue.js？非常感谢。

标签： javascripttypescriptvue.jswebpack

Answer 1

简短回答：将目标和模块更改为“esnext”

{
  "compilerOptions": {
    "target": "esnext",
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "outDir": "./test-app/src/assets/js"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.test.ts"
  ]
}

但是，我不建议在您的 .vue 组件中导入构建文件，因为您需要不断地构建它们以更新它们。这是 vue.js 文档中关于如何集成 typescript 的页面：https ://vuejs.org/v2/guide/typescript.html