Webpack: применить `ts-loader` только к файлам Vue - PullRequest
Новая
       32

Webpack: применить `ts-loader` только к файлам Vue

0 голосов
/ 06 декабря 2018

Я работаю над большим проектом с небольшим количеством Vue.Мы начинаем постепенно добавлять TypeScript.

Мы еще не можем добавить ts-loader в проект, так как это дает 2000+ ошибок.Однако если мы добавим аннотации типов в Vue SFC без ts-loader, vue-loader не сможет обработать синтаксис.

Моя идея состояла в том, чтобы использовать ts-loader только для файлов Vue, но я не могу заставить работать конфигурацию Webpack.

Я уже пробовал несколько подходов и чувствую, чтопо крайней мере, один из них должен работать, если я могу получить правильный синтаксис.Извлечения кода из webpack.base.conf.js:

Принудительная обработка только файлов Vue с использованием правил include / exclude Я пробовал много вариантов include / exclude 

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