TS配置笔记

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']
    }
}