Отсутствует исходная карта для файла vue на основе машинописи из-за атрибута lang = "ts" - PullRequest
Новая
       55

Отсутствует исходная карта для файла vue на основе машинописи из-за атрибута lang = "ts"

0 голосов
/ 19 сентября 2019

У меня проблема с тем, что я хочу переключить мои файлы VUE с JS на Typescript.

Они выглядят так (довольно стандартно) 

<template>
...
</template>

<script>
...
</script>

, и для использования их с машинописью я прочитал, что мне нужно настроить тег script на <script lang="ts">.Это прекрасно работает, и код успешно собирается / переносится через веб-пакет, и я могу запустить свое приложение.Единственная проблема заключается в том, что, как только я поместил lang="ts" в тег сценария, Chrome больше не показывает эти файлы в режиме отладки и, таким образом, кажется, что им не хватает информации об исходных картах (хотя я не очень разбираюсь в исходных картах).Поэтому мне интересно, как правильно настроить исходные карты и файлы, отображаемые в режиме разработчика Chrome, так как, очевидно, он мне снова понадобится для отладки.Дается исходная карта для всех остальных файлов, и файлы отображаются в режиме разработки в Chrome (например, для простых файлов .ts), а также для файлов VUE, которые еще не основаны на TS и, следовательно, не имеют атрибута lang="ts".

Здесь моя распаковка веб-пакетов для файлов ts и vue 

devtool: 'inline-source-map',
module: {
    rules: [
      { test: /\.vue$/,
        loader: 'vue-loader'
      },
      { test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
    ...
    ]
},
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json', '.ts']
  },

и мои настройки tsc для исходных карт и некоторые другие, которые могут иметь отношение 

"sourceMap": true,                  
"strict": true,                         
"alwaysStrict": true,                  
"moduleResolution": "node",          
"allowSyntheticDefaultImports": true,  
"esModuleInterop": true,                   

/* Source Map Options */
// "sourceRoot": ""; 
//"mapRoot": "",
//"inlineSourceMap": true,              
// "inlineSources": true

1 Ответ

0 голосов
/ 20 сентября 2019

Я обнаружил, что с devtool = 'cheap-module-eval-source' это работает, но каталог файлов .vue не отображается, а окончания файлов немного странные, но это работает.Но я не считаю это хорошим решением.Так что, если у sb есть более хороший вариант, пожалуйста, дайте мне знать.Однако следующая проблема, с которой я столкнулся, заключалась в том, что Sonarqube не принимал lang="ts", поскольку они еще не реализовали его (это запрос функции).

Так что в итоге решение, которое работает для меня, неиспользуйте файлы .vue, но вместо этого используйте компоненты sfc на основе классов, как описано в https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components, вместе с плагином vscode для выделения встроенного HTML-кода.Таким образом, я получил рабочий TS, рабочие исходные карты для отладки, рабочий Sonarqube, рабочую подсветку синтаксиса, рабочий, линтинг.Мое личное впечатление таково, что хотя vue.js великолепен, в окружающей среде все еще есть некоторые пробелы, если вы покинете проторенный путь.

...