由于 lang="ts" 属性,基于打字稿的 vue 文件缺少源映射
Sourcemap missing for typescript based vue file due to lang="ts" attribute
我遇到了一个问题,我想将我的 vue 文件从 JS 切换到 Typescript。
它们看起来像这样(很标准)
<template>
...
</template>
<script>
...
</script>
为了将它们与打字稿一起使用,我读到我需要将脚本标签调整为 <script lang="ts">
。这很好用,代码很高兴 build/transpiled 通过 webpack,我可以启动我的应用程序。唯一的问题是,一旦我将 lang="ts"
放入脚本标签中,Chrome 就不再以调试模式显示这些文件,因此似乎缺少它们的源映射信息(尽管我不太了解源映射) .所以我想知道如何正确获取源映射以及在 Chrome 开发人员模式下显示的文件,显然我将再次需要它进行调试。给出所有其他文件的源映射,文件在 Chrome 中以开发模式显示(例如,对于普通 .ts 文件)以及尚未基于 TS 的 vue 文件,因此没有 lang="ts"
属性.
这是我对 ts 和 vue 文件的 webpack 提取
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
我发现使用 devtool = 'cheap-module-eval-source'
它可以工作,但是没有显示 .vue 文件的目录并且文件结尾有点奇怪,但是它可以工作。但我不认为这是一个很好的解决方案。所以如果有人有更好的选择,请告诉我。
然而,我面临的下一个问题是 Sonarqube 不接受 lang="ts"
因为他们还没有实现它(这是一个功能请求)。
所以最终对我有用的解决方案不是使用 .vue 文件,而是使用 https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components 中描述的基于 class 的 sfc 组件以及 vscode 插件来突出显示内联 html 代码。
通过这种方式,我得到了工作 TS,工作用于调试的源映射,工作 Sonarqube,工作语法突出显示,工作,linting。
个人感觉vue.js虽然不错,但如果不走寻常路,周边环境还是有不少差距。
我遇到了一个问题,我想将我的 vue 文件从 JS 切换到 Typescript。
它们看起来像这样(很标准)
<template>
...
</template>
<script>
...
</script>
为了将它们与打字稿一起使用,我读到我需要将脚本标签调整为 <script lang="ts">
。这很好用,代码很高兴 build/transpiled 通过 webpack,我可以启动我的应用程序。唯一的问题是,一旦我将 lang="ts"
放入脚本标签中,Chrome 就不再以调试模式显示这些文件,因此似乎缺少它们的源映射信息(尽管我不太了解源映射) .所以我想知道如何正确获取源映射以及在 Chrome 开发人员模式下显示的文件,显然我将再次需要它进行调试。给出所有其他文件的源映射,文件在 Chrome 中以开发模式显示(例如,对于普通 .ts 文件)以及尚未基于 TS 的 vue 文件,因此没有 lang="ts"
属性.
这是我对 ts 和 vue 文件的 webpack 提取
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
我发现使用 devtool = 'cheap-module-eval-source'
它可以工作,但是没有显示 .vue 文件的目录并且文件结尾有点奇怪,但是它可以工作。但我不认为这是一个很好的解决方案。所以如果有人有更好的选择,请告诉我。
然而,我面临的下一个问题是 Sonarqube 不接受 lang="ts"
因为他们还没有实现它(这是一个功能请求)。
所以最终对我有用的解决方案不是使用 .vue 文件,而是使用 https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components 中描述的基于 class 的 sfc 组件以及 vscode 插件来突出显示内联 html 代码。 通过这种方式,我得到了工作 TS,工作用于调试的源映射,工作 Sonarqube,工作语法突出显示,工作,linting。 个人感觉vue.js虽然不错,但如果不走寻常路,周边环境还是有不少差距。