Question

我正在处理一个大型项目，其中包含一些Vue。我们开始逐步添加TypeScript。

我们尚无法将ts-loader添加到项目中，因为这样会产生2000多个错误。但是，如果我们在不带ts-loader的Vue SFC中添加类型注释，则vue-loader无法处理语法。

我的想法是仅在Vue文件上使用ts-loader，但无法使Webpack配置正常工作。

到目前为止，我已经尝试了多种方法，如果可以正确使用语法，我觉得其中至少有一种方法必须可行。从webpack.base.conf.js中提取的代码：

仅强制使用包含/排除规则处理Vue文件 我尝试了包含/排除

的许多变体

rules: [
  [ eslint-loader ],
  [ vue-loader ],
  {
    test: /\.ts$/,
    loader: 'ts-loader',
    options: { appendTsSuffixTo: [/\.vue$/] },
    exclude: /src/,
    include: /src\/components\/vue/,
  },
  [ babel-loader ],
  [ other standard loaders ],
]

将ts-loader添加到vue-loader选项

vueLoaderConfig = {
  ...[existing CSS loaders],
 loader: 'ts-loader',
};

// relevant part of config object

rules: [
  [ eslint-loader ],
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig,
  },
  [ babel-loader ],
  [ other standard loaders ],
]

将.vue文件重命名为.vue.ts以使用Webpack规则定位

rules: [
  [ eslint-loader ],
  {
    test: /\.vue\.ts$/,
    loader: 'vue-loader',
    options: vueLoaderConfig,
  },
  {
    test: /\.vue\.ts$/,
    loader: 'ts-loader',
  },
  [ babel-loader ],
  [ other standard loaders ],
]

以上任何配置都可以实际使用吗？您能看到我看错格式的任何明显地方吗？如果有人有完全不同的方法，我也会有兴趣听到的。

版本：

"@babel/core": "^7.1.5",
"babel-loader": "^8.0.4",
"ts-loader": "^5.3.1",
"typescript": "^3.1.6",
"vue-loader": "^15.4.2",
"webpack": "^4.25.1",

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "noEmit": true,
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": ".",
    "lib": ["es2015", "dom"],
    "paths": {
      "src/*": ["src/*"]
    }
  },
  "include": ["./src/**/*"]
}

Webpack：仅将“ ts-loader”应用于Vue文件

0 个答案: