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

Question

我正在尝试使用tsconfig.json 文件将TypeScript 文件编译成JavaScript 文件。 tsconfig.json 文件是：

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

上述配置工作正常，并在构建文件夹中创建编译的JavaScript 文件。如果我在build 文件夹中使用node run index.js，它也可以正常工作。 但是如果我将build文件夹中的index.js文件导入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

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

目标是使用编译的JavaScript 文件到Vue.js 应用程序中。 任何人都可以帮我解决tsconfig.json 文件中缺少的内容吗？ 或者 有没有其他方法可以使用vue.js 将ts 编译成js？ 非常感谢。

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