webpack5之TypeScript配置，vue3环境

背景

自己从头配置了一个基于webpack5 + vue3 + TS 的项目

TS的配置还是遇到了一些坑

setup

TS的配置有两个方案

（方案一）ts-loader

GitHub----ts-loader

官方example

个人推荐这个配置 example

如果想要最简单的配置，可以使用这个 vanilla

my demo

仅仅作为参考

npm install typescript ts-loader -D

transpileOnly: true, 禁用类型检查，

fork-ts-checker-webpack-plugin 用这个plugin在一个单独的进程上进行类型检查

// webpack.config.js
module.exports = {
    module: {
        rules: [
            // .vue 这个配置一定要放在js 之前，这是有顺序的
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            // babel
            {
                test: /\.js$/,
                exclude: file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                ),
                use: [
                    'babel-loader',
                ]
            },
            // ts
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'ts-loader', /* https://github.com/TypeStrong/ts-loader */
                        options: {
                            // 指定特定的ts编译配置，为了区分脚本的ts配置
                            // 注意这里的路径问题，按照自己项目来配置
                            configFile: path.resolve(__dirname, '../tsconfig.json'),
                            appendTsSuffixTo: [/\.vue$/],
                            /* 只做语言转换，而不做类型检查, 这里如果不设置成TRUE，就会HMR 报错 */
                            transpileOnly: true, 
                        }
                    }
                ]
            },
        ]
    }
}

tsconfig.json

"sourceMap": true, 这个一定要配置

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "es5",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
    "module": "commonjs",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": [
      "es6",
      "dom",
      "es2017"
    ],                                   /* Specify library files to be included in the compilation. */
    // "allowJs": true,                             /* Allow javascript files to be compiled. */
    "sourceMap": true,                           /* Generates corresponding '.map' file. */
    // "outFile": "./",                             /* Concatenate and emit output to single file. */
    // "outDir": "./",                              /* Redirect output structure to the directory. */
    "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    /* Strict Type-Checking Options */
    "strict": true,                                 /* Enable all strict type-checking options. */
    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    /* Advanced Options */
    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
  ],
  "exclude": [
    "node_modules",
    "dist"
  ]
}

（方案二）@babel/preset-typescript

 npm i typescript @babel/preset-typescript --save-dev

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": ["> 1%", "last 2 versions", "not ie <= 8", "Android >= 4.4"]
                }
            }
        ],
        [
            "@babel/preset-typescript",
             {
                 "isTSX": true, // 必须设置，否者编译tsx时会报错
                 "allowNamespaces": true,
           "allExtensions": true // 必须设置，否者编译.vue 文件中ts 代码会报错
             }
        ]
    ],
    "plugins": [
        ["@babel/plugin-transform-runtime", {
            "corejs": 3
        }]
    ]
}

loader

module.exports = {
    module: {
        rules: [
            // .vue 这个配置一定要放在js 之前，这是有顺序的
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            // babel
            {
                test: /\.js$/,
                exclude: file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                ),
                use: [
                    'babel-loader',
                ]
            },
            // ts
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader',
                ]
            },
        ]
    }
}

总结

使用ts-loader 配置比较麻烦，方案二简单一点，ts-loader 自己还需要加深理解，里面配置是非常多的