TS 配置笔记

{

  "include": [​    "./src/**/*"], *// 指定哪些 ts 文件须要编译 ** 代表任意目录 \* 代表任意文件 *

  "exclude": [​    "./src/other/**/*"], *// 指定哪些 ts 文件不须要编译 默认值 ["node_modules","bower_components","jspm_packages"]*

  "extends": "./configs/base", *// 定义被继承的配置文件 *

  "files": [​    *// "core.ts"*], *// 指定编译的文件 *

  */** 

  *compilerOptions 编译器的选项 *

  **/*

  "compilerOptions": {

​    "target": "es6", *// 指定编译成的 ES 版本 *

​    "module": "es6", *// 指定要应用的模块化标准 *

​    *// "lib": [], // 指定我的项目中引入的库，将根据这些库进行类型查看 / 代码提醒 个别不须要批改 除非不是在浏览器环境下运行 *

​    "outDir": "./dist", *// 指定编译后的 js 文件寄存目录 *

​    *// "outFile": "./dist/app.js", // 将 全局作用域 编译后的代码合并到一个文件 *

​    *// "allowJs": true, // 是否编译 js 文件，默认为 false*

​    *// "checkJs": true, // 查看 js 代码是否符合规范 默认为 false*

​    "removeComments": true, *// 是否移除正文 默认为 false*

​    "noEmit": false, *// 不生成编译后的 js 文件 默认为 false*

​    "noEmitOnError": false, *// 当有谬误时，不生成编译后的 js 文件 默认 false*

​    */\* 严格查看 \*/*

​    "alwaysStrict": false, *// 编译后的 js 文件 应用严格模式 默认为 false*

​    "noImplicitAny": false, *// 不容许有隐式的 any 默认为 false 容许 *

​    *// "noImplicitThis": true, // 不容许有隐式类型的 this 默认为 false*

​    *// "strictNullChecks": true, // 严格的空值查看 默认为 false*

​    "strict": true, *// 所有严格查看的总开关 *

  }

}

webpack 配置

/*
 * @Description:
 * @Author: forceddd
 * @Date: 2021-04-02 16:50:07
 */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    mode: 'development',
    // 入口文件
    entry: './src/index.ts',
    // 打包后的文件
    output: {path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        clean: true,
        // 配置打包环境
        environment: {
            // 不实用箭头函数
            arrowFunction: false
        }
    },
    // 指定 webpack 打包时 应用到的模块 
    module: {
        // 指定打包时加载模块的规定
        rules: [
            {
                test: /\.ts$/,
                use: [
                    // 配置 babel
                    {
                        loader: 'babel-loader',
                        // 配置 babel
                        options: {
                            // 设置预约义的环境 数组
                            presets: [
                                // 第一个环境
                                [
                                    // 要应用的插件
                                    '@babel/preset-env',
                                    // 配置信息
                                    {
                                        // 要兼容的指标浏览器
                                        targets: {
                                            'chrome': '88',
                                            'ie': '11'
                                        },
                                        // 指定 corejs 的版本 corejs 为不反对 es6 新个性的浏览器提供了本人的实现
                                        'corejs': '3',
                                        // 应用 corejs 的形式 usage 按需加载
                                        'useBuiltIns': 'usage',
                                    }
                                ]
                            ]
                        }
                    }, 'ts-loader'],
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        contentBase: './dist',
        hot: true
    },
    devtool: 'inline-source-map',
    plugins: [
        new HtmlWebpackPlugin({title: 'ts-learning'}),
    ],
    //resolve 通知 webpack 哪些文件能够作为模块被引入
    resolve: {extensions: ['.ts', '.js']
    }
}