Question

自2018年8月以来，可以使用Typescript来编译Babel代码，并将类型检查作为一个单独的过程。

我想知道是否可以对不带.vue / <script lang="ts">的{{1}}节的Webpack这样的自定义文件格式进行类型检查吗？（我认为在这种情况下，Typescript需要支持文件预处理，以便能够消化不同的文件格式。）

现在，我只需要使用ts-loader维护一个单独的Webpack配置并编译Vue.js项目，尽管我只需要进行类型检查即可。因此，这种方法看起来更像是hack和开销。

Answer 1

将ts-loader与Webpack一起使用非常好。我们的Vue.js规模非常大，并且我们拥有以Webpack为捆绑器的多页SPA。您真的不需要为 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文件用作there are problems。 注意：在开发过程中，我们将transpileOnly设置为false。

如果您可以切换到使用@Component装饰器使用类语法并使用vue-template-loader，那么可以切换到使用Babel + TypeScript。几乎没有令人讨厌的惊喜，例如不支持const enums，名称空间等。

注意：在ts-loader上使用@babel/preset-typescript有其自身的优势。与Webpack结合使用，ts-loader更具可破解性。如果您需要键入JSX，即Vue.js支持TSX，那么通天塔路由更有意义。如果您使用的是.vue文件，则没有太大的区别。

没有打字机但没有Webpack / ts-loader的Vue的类型检查

1 个答案: