TS自动编译配置、tsconfig.json常用配置详解、ts结合webpack

官网：https://webpack.js.org/

tsconfig.json常用配置详解

{
    // include 用来指定哪些ts文件需要被编译
    // ** 表示任意文件夹
    // * 表示任意文件
    // "./src/**/*" 表示src下的任意文件夹下的任意文件
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "./src/hello/**/*"
    ],
    "compilerOptions": {
        // target 用来指定ts被编译为js的版本，默认为es3
        "target": "es2015",

        // module 指定要使用的模块化的规范
        // 可选值：none/commonjs/es6/es2015/es2020/system...
        "module": "es2015",

        // lib 指定要用的一些库，一般不用配置
        // "lib": ["dom", "ES6"],

        // outDir 用来指定编译后的js要存放在哪个文件夹下
        "outDir": "./dist",

        // 配置outFile后，所有的全局作用域中的代码会合并到同一个文件中，一般不用配置
        // "outFile": "./dist/app.js",

        // 是否对js文件进行编译，默认是false
        "allowJs": false,
        // 是否检查js代码是否符合ts规范，默认是false，一般和allowJs一起配置
        "checkJs": false,

        // 是否移除注释，默认值为false
        "removeComments": false,

        //不生成编译后的js文件，默认值false（生成文件），一般不配置
        // "noEmit": true,

        // 所有严格检查的总开关，一般设为true，都打开；需要关闭的再另外一一设置
        "strict": true,

        // 当有错误时不生成编译后的js文件，默认是false（ts有错误，也能编译生成js文件）
        "noEmitOnError": true,

        // 用来设置编译后的js文件是否使用严格模式，默认是false(不使用严格模式)
        "alwaysStrict": false,

        //不允许出现隐式的any类型
        "noImplicitAny": true,

        // 不允许不明确类型的this
        "noImplicitThis": true,
        
        // 严格的检查空值
        "strictNullChecks": true
    }
}

ts结合webpack
1、npm init ：创建package.json
2、npm i -D webpack-dev-server：相当于在项目中安装了一个webpack的内置服务器，可以让我们的项目在它上面运行。默认地址：localhost:8080
3、在package.json中配置：

  "scripts": {
    "start": "webpack serve --open chrome.exe" //启动webpack服务器时，默认用chrome浏览器打开
  },

4、webpack.config.js

const path = require('path')
// npm i -D html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin') //在dist下自动生成新的index.html，并且在index.html中引入相关资源
// npm i -D clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //该插件用于，在每次编译前，先将旧的dist文件删除，然后创建新的dist文件

module.exports = {
	//配置模式，必配项，可参考https://webpack.js.org/concepts/#mode
	mode: 'development',
    // 打包入口文件
    entry: "./src/main.ts",
    output: {
        //__dirname表示webpack.config.js所在目录，即 webpack_demo1; 将'dist'拼接到webpack_demo1后面，即webpack_demo1/dist
        path: path.resolve(__dirname,'dist'), 
        // 打包出口文件为：webpack_demo1/dist/bundle.js
        filename: 'bundle.js',
        environment: {
        	//告诉webpack，编译后的js文件中不使用箭头函数
            arrowFunction: false,
            //告诉webpack，编译后的js文件中不使用const,兼容ie10
            const: false
        },
        // publicPath: '/', //默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
    },
    //指定webpack打包时要使用模块
    module: {
        //指定要加载的规则
        rules: [
          {
            test: /\.ts$/,
            use: [
                // npm i -D @babel/core @babel/preset-env babel-loader core-js
                //配置babel,将es6的新语法转为旧语法；老版本中不能用的新语法，通过babel，使老版本也能用
                {
                    //指定加载器
                    loader: "babel-loader",
                    //设置babel
                    options: {
                        //设置预定义的环境
                        presets: [
                            [
                                //指定环境的插件
                                "@babel/preset-env",
                                //配置信息
                                {
                                    //要兼容的目标浏览器
                                    targets: {
                                        "chrome": "87"
                                    },
                                    //指定corejs的版本
                                    "corejs": "3",
                                    //表示按需加载corejs
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                'ts-loader'
            ],
            // 要排除的文件
            exclude: /node-modules/
          },
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          //npm i -D less less-loader css-loader style-loader
          {
            test: /\.less$/,
            use: [
                "style-loader",
                "css-loader",
                //引入postcss，有点类似也babel，让老版本浏览器也能支持新样式
                //npm i -D postcss postcss-loader postcss-preset-env
                {
                    loader: "postcss-loader",
                    options: {
                        postcssOptions: {
                            plugins: [
                                [
                                    "postcss-preset-env",
                                    {
                                        browsers: 'last 2 versions' //兼容每个浏览器最新的两个版本
                                    } 
                                ]
                            ]
                        }
                    }
                },
                "less-loader" 
            ]
          },
        ]
    },
    //用来设置引用模块
    resolve: {
        extensions: ['.js', '.ts'], //配置导入文件时，可省略的扩展名
    },
    plugins: [
        new CleanWebpackPlugin(),//在每次编译前，先将旧的dist文件删除，然后创建新的dist文件
        
        //在dist下自动生成新的index.html，并且在index.html中引入相关资源
        new HtmlWebpackPlugin({
            // 注意：index.html 必须和 webpack.config.js 在同一目录下
            template: 'index.html' //以index.html为模板，在打包时，在dist文件夹下生成index.html
        }),
    ],
}

简洁版tsconfig.json

{
    "compilerOptions": {
        // target 用来指定ts被编译为js的版本，默认为es3
        "target": "es2015",

        // module 指定要使用的模块化的规范
        // 可选值：none/commonjs/es6/es2015/es2020/system...
        "module": "es2015",
        
        // 当有错误时不生成编译后的js文件，默认是false（ts有错误，也能编译生成js文件）
        "noEmitOnError": true,

        // 所有严格检查的总开关，一般设为true，都打开；需要关闭的再另外一一设置
        "strict": true,
    }
}