时间戳

首页 > 解决方案 > Webpack：仅将 `ts-loader` 应用于 Vue 文件

typescript - Webpack：仅将 `ts-loader` 应用于 Vue 文件

问题描述

我正在做一个包含一些 Vue 的大型项目。我们开始逐步添加 TypeScript。

我们还不能添加ts-loader到项目中，因为这会产生 2000 多个错误。但是，如果我们在没有 的情况下向 Vue SFC 添加类型注释ts-loader，vue-loader则无法处理语法。

我的想法是ts-loader仅在 Vue 文件上使用，但我无法让 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.ts使用 Webpack 规则将 .vue 文件重命名为目标

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/**/*"]
}

标签： typescriptvue.jswebpackvue-loaderts-loader

解决方案

推荐阅读