Проверка типов Vue с Typescript, но без Webpack / ts-loader - PullRequest
Новая
       32

Проверка типов Vue с Typescript, но без Webpack / ts-loader

0 голосов
/ 19 марта 2019

С августа 2018 года можно скомпилировать Typescript код с Babel и иметь проверку типов в качестве отдельного процесса.

Интересно, можно ли выполнять проверку типов пользовательских форматов файлов, таких как * 1005?* с <script lang="ts"> секциями без Webpack / ts-loader?(Я считаю, что в этом случае Typescript должен был бы поддерживать предварительную обработку файлов, чтобы иметь возможность переваривать файлы разных форматов).

Сейчас мне нужно поддерживать отдельную конфигурацию веб-пакета с ts-loader и компилировать Vue.jsпроект, хотя все, что мне нужно, это проверить его тип.Так что этот подход больше похож на хак и накладные расходы.

1 Ответ

0 голосов
/ 19 марта 2019

Прекрасно использовать ts-loader с Webpack.Наш Vue.js чрезвычайно масштабный, и у нас есть многостраничный SPA с Webpack в качестве нашего упаковщика.Вам не нужно иметь отдельную конфигурацию для ts-loader .Взгляните на наш конфиг Webpack (три экземпляра ts-loader): 

const rules = [
    {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: [...PATHS.shared, path.join(__dirname, 'node_modules')],
        options: {
            transpileOnly: isDev,
            appendTsSuffixTo: [/\.vue$/],
            instance: 'common',
            configFile: path.join(__dirname, 'tsconfig.json')
        }
    },
    {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: [PATHS.app1],
        options: {
            transpileOnly: isDev,
            appendTsSuffixTo: [/\.vue$/],
            instance: 'app1',
            configFile: path.join(PATHS.app1, 'tsconfig.json')
        }
    },
    {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        include: [PATHS.app2],
        options: {
            transpileOnly: isDev,
            appendTsSuffixTo: [/\.vue$/],
            instance: 'app2',
            configFile: path.join(PATHS.app2, 'tsconfig.json')
        }
    }
];

Возвращаясь к вашему вопросу, я добился успеха с @babel/preset-typescript, но мы не используем файлы .vue как есть проблемы при обработке .vue файлов. Примечание: мы устанавливаем transpileOnly в значение false во время разработки.

Если вы можете переключиться на использование синтаксиса классов с @Component декоратором и использовать vue-template-loader, затем вы можете переключиться на использование Babel + TypeScript.Есть небольшие неприятные сюрпризы, такие как отсутствие поддержки const enums, пространств имен и т. Д.

Примечание. Использование ts-loader по сравнению с @babel/preset-typescript имеет свои преимущества.В сочетании с Webpack, ts-loader более взломан.Если вам нужен типизированный JSX, то есть поддержка TSX с Vue.js, тогда маршрут babel имеет больше смысла.Если вы используете .vue файлы, то нет существенной разницы.

...