Meteor, Vue 및 Typescript 설정

Meteor, Vue 및 Typescript 설정

Meteor, Vue, Typescript가 함께 일하게 하려고 애쓰고 있어요.Meteor, Vue 및 Typescript에 대한 튜토리얼을 찾을 수 없습니다.또한 github 프로젝트의 예도 올바르게 동작하지 않고 회피책을 사용하여 문제를 회피할 수 있습니다.예: 스크립트 태그에 Typescript 코드를 포함하지 않고 자체 파일로 구분합니다.

이 튜토리얼에 따르면 컴포넌트를 두 가지 방법으로 정의할 수 있습니다.

1

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
}
</script>

2

<script lang="ts">
@component({
    name: 'HelloWorld'
})
</script>

Meteon vue 프로젝트를 생성하여 이 단계를 수행하면 위의 코드가 오류가 발생합니다.

유성 생성

meteor create --vue "vue-typescript-test"

더하다tsconfig.json

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015"],
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  }
}

더하다ts-loader

npm i -D typescript ts-loader

더하다vue-property-decorator

npm install vue-property-decorator

에서 스크립트를 변경하면Hello.vue튜토리얼에 기재되어 있는 타입 스크립트를 사용하면, 에러가 발생합니다.

<script lang="ts">
import {Component} from "vue-property-decorator";

@Component({
  name: 'Hello'
})
</script>

에러

[vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it?
    [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:81:13)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
at packages/vue-component/plugin/vue-compiler.js:57:34
at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
at C:\tools\isobuild\compiler-plugin.js:212:27
at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
at C:\tools\isobuild\compiler-plugin.js:199:22
at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
at C:\tools\isobuild\compiler-plugin.js:198:15
at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
at ClientTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
at C:\tools\isobuild\bundler.js:858:34
at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
at ClientTarget.make (C:\tools\isobuild\bundler.js:852:18)
at C:\tools\isobuild\bundler.js:3233:14
at C:\tools\isobuild\bundler.js:3386:25
at Array.forEach (<anonymous>)
  at C:\tools\isobuild\bundler.js:3340:14
  at Object.capture (C:\tools\utils\buildmessage.js:283:5)
  at bundle (C:\tools\isobuild\bundler.js:3214:31)
  at C:\tools\isobuild\bundler.js:3157:32
  at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
  at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
  at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
  at C:\tools\runners\run-app.js:581:24
  at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
  at bundleApp (C:\tools\runners\run-app.js:580:34)
  at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
  at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
  at C:\tools\runners\run-app.js:410:12
  [vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it?
    [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
      ReferenceError: TemplatingTools is not defined
      at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
      at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:81:13)
      at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
      at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
      at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
      at packages/vue-component/plugin/vue-compiler.js:57:34
      at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
      at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
      at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
      at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
      at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
      at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
      at C:\tools\isobuild\compiler-plugin.js:212:27
      at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
      at C:\tools\isobuild\compiler-plugin.js:199:22
      at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
      at C:\tools\isobuild\compiler-plugin.js:198:15
      at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
      at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
      at ClientTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
      at C:\tools\isobuild\bundler.js:858:34
      at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
      at ClientTarget.make (C:\tools\isobuild\bundler.js:852:18)
      at C:\tools\isobuild\bundler.js:3233:14
      at C:\tools\isobuild\bundler.js:3386:25
      at Array.forEach (<anonymous>)
        at C:\tools\isobuild\bundler.js:3340:14
        at Object.capture (C:\tools\utils\buildmessage.js:283:5)
        at bundle (C:\tools\isobuild\bundler.js:3214:31)
        at C:\tools\isobuild\bundler.js:3157:32
        at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
        at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
        at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
        at C:\tools\runners\run-app.js:581:24
        at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
        at bundleApp (C:\tools\runners\run-app.js:580:34)
        at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
        at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
        at C:\tools\runners\run-app.js:410:12
        [vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it?
          [vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
            ReferenceError: TemplatingTools is not defined
            at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
            at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:81:13)
            at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
            at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
            at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
            at packages/vue-component/plugin/vue-compiler.js:57:34
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
            at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
            at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
            at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
            at __bottom_mark__ (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\utils\tools\utils\parse-stack.ts:92:14)
            at C:\tools\isobuild\compiler-plugin.js:212:27
            at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
            at C:\tools\isobuild\compiler-plugin.js:199:22
            at Function.time (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:284:12)
            at C:\tools\isobuild\compiler-plugin.js:198:15
            at Function._.each._.forEach (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\underscore\underscore.js:191:9)
            at CompilerPluginProcessor.runCompilerPlugins (C:\tools\isobuild\compiler-plugin.js:188:7)
            at ServerTarget._runCompilerPlugins (C:\tools\isobuild\bundler.js:1149:22)
            at C:\tools\isobuild\bundler.js:858:34
            at Object.enterJob (C:\tools\utils\buildmessage.js:388:12)
            at ServerTarget.make (C:\tools\isobuild\bundler.js:852:18)
            at C:\tools\isobuild\bundler.js:3258:14
            at C:\tools\isobuild\bundler.js:3392:24
            at Object.capture (C:\tools\utils\buildmessage.js:283:5)
            at bundle (C:\tools\isobuild\bundler.js:3214:31)
            at C:\tools\isobuild\bundler.js:3157:32
            at Slot.withValue (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\dev_bundle\lib\node_modules\@wry\context\lib\context.js:73:29)
            at Object.withCache (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\fs\tools\fs\files.ts:1663:39)
            at Object.bundle (C:\tools\isobuild\bundler.js:3157:16)
            at C:\tools\runners\run-app.js:581:24
            at Function.run (C:\Users\Michael\AppData\Local\.meteor\packages\meteor-tool\2.1.0\mt-os.windows.x86_64\tools\tool-env\tools\tool-env\profile.ts:289:14)
            at bundleApp (C:\tools\runners\run-app.js:580:34)
            at AppRunner._runOnce (C:\tools\runners\run-app.js:627:35)
            at AppRunner._fiber (C:\tools\runners\run-app.js:948:28)
            at C:\tools\runners\run-app.js:410:12
            => Errors prevented startup:

            While processing files with akryum:vue-component (for target web.browser):
            packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
            at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
            at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
            at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
            at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
            at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
            at packages/vue-component/plugin/vue-compiler.js:57:34
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
            at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
            at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
            at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)


            While processing files with akryum:vue-component (for target web.browser.legacy):
            packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
            at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
            at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
            at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
            at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
            at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
            at packages/vue-component/plugin/vue-compiler.js:57:34
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
            at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
            at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
            at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)


            While processing files with akryum:vue-component (for target os.windows.x86_64):
            packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
            at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
            at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:104:11)
            at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
            at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
            at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
            at packages/vue-component/plugin/vue-compiler.js:57:34
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3110:16
            at replenish (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1011:17)
            at C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:1016:9
            at Object.eachLimit$1 (C:\Users\Michael\AppData\Local\.meteor\packages\akryum_vue-component\0.15.2\plugin.vue-component.os\npm\node_modules\meteor\vue-component\node_modules\async\dist\async.js:3196:24)
            at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)

Meteor, Vue 및 Typescript 프로젝트를 올바르게 설정하려면 어떻게 해야 합니까?

갱신하다

Meteor, Vue, Typescript 및 Vue Class Component 구문 프로젝트를 만드는 방법을 보여 줄 수 있는 사람이 있으면 문제를 해결할 수 있습니다.

NAT이 귀하를 지원할 저장소를 제공해야 합니다.참고로 당신의 튜토리얼은 단계별로 따라야 할 튜토리얼이 아닙니다.그냥 일이 어떻게 돌아가는지 설명해주죠.다른 것을 찾으시길 권해드립니다.

요점은 모르겠습니다만, Meteor를 탑재한 VueJs(타이프 스크립트 사용)의 경우, 공식 프레임워크의 문서를 참조하는 것을 추천합니다.튜토리얼보다 낫다고 장담할 수 있습니다.

여기 vueJs용 https://guide.meteor.com/vue.html

그리고 이것은 타이프스크립트 파트 https://guide.meteor.com/build-tool.html#typescript 입니다.

어떤 이유로든 설명서에 따르지 않고 프로젯을 계속 사용하고 싶은 경우, 우리는 그 내용을 읽어야 합니다.

lang 'ts' 핸들러를 찾을 수 없습니다.

ts-loader스크립트 내에서 lang="ts"를 사용할 수 있는 패키지입니다.

설정이 되어 있지 않기 때문에, 상기의 메세지가 있는 것 같습니다.따라서 구성 방법을 찾아야 합니다.

https://cnpmjs.org/package/ts-loader 에는 다음과 같이 기재되어 있습니다.

설정 다음과 같이 webpack.config.js를 작성 또는 업데이트합니다.

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: "./app.ts",
  output: {
    filename: "bundle.js"
  },
  resolve: {
    // Add `.ts` and `.tsx` as a resolvable extension.
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

tsconfig.json 파일을 추가합니다.(아래는 매우 심플하지만, 마음에 맞게 조정할 수 있습니다.)

{
  "compilerOptions": {
    "sourceMap": true
  }
}

언급URL : https://stackoverflow.com/questions/66720970/setting-up-meteor-vue-and-typescript