Как скомпилировать файлы TypeScript в JavaScript с помощью Vue.js

Question

Я пытаюсь скомпилировать TypeScript файлы в JavaScript файлы, используя tsconfig.json файл. Файлы tsconfig.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.

Цель - использовать скомпилированные JavaScript файлы в приложении Vue.js. Кто-нибудь может мне помочь, что мне не хватает в файле tsconfig.json? или есть какой-нибудь другой способ скомпилировать ts в js, используя vue.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 о том, как интегрировать машинопись: https://vuejs.org/v2/guide/typescript.html