TS环境搭建

TS环境初始化

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack配置
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件输出目录
    output: {

        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // 不能使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    // 指定webpack打包时使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // 指定规则生成文件
                test: /\.ts$/,
                // 使用的loader
                use: [
                    {
                        // 指定加载器
                        loader: 'babel-loader',
                        options: {

                            // 设置预定义环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的浏览器
                                        targets: {
                                            "chrome": "88",
                                            // "ie": "11"
                                        },
                                        "corejs": "3",
                                        // 按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node_modules/,
            },
            // 设置less文件的处理
            {
                test: /\.less$/,
                use: [
                    // 从下往上执行，顺序固定
                    "style-loader",
                    "css-loader",
                    // 引入postcss
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    [
                                        "postcss-preset-env", {
                                            browser: "last 2 versions"
                                        }
                                    ]
                                ]
                            }
                        }

                    },
                    "less-loader"
                ]

            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: "VSCODE",
            template: "./src/index.html"
        }),
    ],
    // 用来设置可以引用的模块
    resolve: {
        extensions: ['.ts', '.js']
    }
}

tsconfig.json

{
    // ts编译器配置文件
    // 指定要编译的文件 /** 任意目录 * 任意文件
    "include": [
        "./src/*"
    ],
    "exclude": [
        "./01.ts"
    ],
    "compilerOptions": {
        // 指定ts编译成ES的版本
        "target": "ES3",
        "module": "es2015",
        // 使用的库
        // "lib": [],
        // 解析结果文件，存放位置
        "outDir": "./dist",
        // 将代码合并为一个文件
        // "outFile": "aaa.js",
        // 是否对js进行编译
        "allowJs": false,
        // 是否检查js代码
        "checkJs": false,
        // 注释是否需要编译
        "removeComments": false,
        // 不生成编译后的文件
        "noEmit": false,
        // 有错误，不生成编译文件
        "noEmitOnError": true,
        // 编译后的文件是否使用严格模式
        "alwaysStrict": false,
        // 不允许隐士any
        "noImplicitAny": false,
        // 不允许使用不确定this
        "noImplicitThis": true,
        "strictNullChecks": false,
        // 所有严格检查的总开关
        "strict": false
    }
}

package.json

{
  "name": "ts",
  "version": "1.0.0",
  "description": "",
  "main": "02.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "core-js": "^3.15.2",
    "css-loader": "^5.2.7",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "postcss": "^8.3.5",
    "postcss-loader": "^6.1.1",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^3.1.0",
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.5",
    "webpack": "^5.44.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}