TS配置笔记

Posted 2021-09-14 forceddd

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