TypeScript configuration for webpack5, vue3 environment

background

I configured a project based on WebPack5 + VUe3 + TS from scratch

The TS configuration still has a few hiccups

setup

There are two scenarios for TS configuration

(Solution 1) TS-Loader

GitHub—-ts-loader

The official example

I recommend this configuration example

If you want the simplest configuration, use this Vanilla

my demo

For reference only

npm install typescript ts-loader -D
Copy the code

TranspileOnly: true, disables type checking,

Fork-ts-checker -webpack-plugin Uses this plugin to do type checking on a separate process

// webpack.config.js
module.exports = {
    module: {
        rules: [
            //.vue must be placed before js. This is sequential
            {
                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: {
                            // Specify a specific TS compilation configuration to distinguish the script's TS configuration
                            // Pay attention to the path problem here, according to their own project configuration
                            configFile: path.resolve(__dirname, '.. /tsconfig.json'),
                            appendTsSuffixTo: [/\.vue$/]./* Only language conversion, no type checking, HMR error if not set to TRUE */
                            transpileOnly: true,}}]},]}}Copy the code

tsconfig.json

“SourceMap “: true, this must be configured

{
  "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"]}Copy the code

(Option 2) @babel/preset-typescript

 npm i typescript @babel/preset-typescript --save-dev
Copy the code

.babelrc

{
    "presets": [["@babel/preset-env",
            {
                "targets": {
                    "browsers": ["1%" >."last 2 versions"."not ie <= 8"."Android > = 4.4"]}}], ["@babel/preset-typescript",
             {
                 "isTSX": true.// This parameter must be set. If not, TSX will get an error when compiling
                 "allowNamespaces": true."allExtensions": true Vue file ts code will report an error}]],"plugins": [["@babel/plugin-transform-runtime", {
            "corejs": 3}}]]Copy the code

loader

module.exports = {
    module: {
        rules: [
            //.vue must be placed before js. This is sequential
            {
                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',]},]}}Copy the code

conclusion

It is troublesome to use TS-Loader configuration. Solution 2 is a little simpler, and TS-Loader itself needs to be further understood. There are many configurations in it