ts基础配置

1.ts编译器的基础配置 -- tsconfig.json

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

{ /*   tsconfig.json是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译     "include" 用来指定哪些ts文件需要被编译       路径：** 表示任意目录             * 表示任意文件     "exclude" 不需要被编译的文件目录         默认值：["node_modules", "bower_components", "jspm_packages"]   */   "include": [     "./src/**/*"   ],  "exclude": [    "./src/hello/**/*"  ],     /*     compilerOptions 编译器的选项   */   "compilerOptions": {       // target 用来指定ts被编译为的ES的版本     // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'     "target": "es2015",     // module 指定要使用的模块化的规范     // 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'     "module": "es2015",     // lib用来指定项目中要使用的库-根据这些库去检查代码     //'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es     //2018', 'es2019', 'es2020', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scri     //pthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.r     //eflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.st     //ring', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', '     //es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.s     //haredmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable     //', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref' //    "lib": ["es6", "dom"]         // outDir 用来指定编译后文件所在的目录     "outDir": "./dist",       // 将代码合并为一个文件     // 设置outFile后，所有的全局作用域中的代码会合并到同一个文件中     //"outFile": "./dist/app.js"       // 是否对js文件进行编译，默认是false //    "allowJs": true,     // 是否检查js代码是否符合语法规范，默认是false //    "checkJs": true,     // 是否移除注释     "removeComments": true,     // 不生成编译后的文件，默认false     "noEmit": false,       // 当有错误时不生成编译后的文件，默认false     "noEmitOnError": true,       // 所有严格检查的总开关     "strict": true,       //js格式文件前加入 "use strict"即可     // 用来设置编译后的文件是否使用严格模式，默认false     "alwaysStrict": true,       // 不允许隐式的any类型（没有标注any类型的，默认any类型），默认false     "noImplicitAny": true,       // 不允许不明确类型的this     "noImplicitThis": true,     // function fn(this:window){alert(this)}       // 严格的检查空值     "strictNullChecks": true     // 可以使用xxx?.判断     } }

2.webpack.config.js - 关于TS的配置

// 引入一个包
const path = require('path');
// 引入html插件-自动生成打包的HTML文件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件-打包时清空之前打包的文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {

    // 指定入口文件
    entry: "./src/index.ts",

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录   
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename: "bundle.js",

        // 配置webpack打包环境
        environment: {
            // 告诉webpack打包时不使用箭头
            arrowFunction: false
        }
    },

    // 指定webpack打包时要使用模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境的插件，使代码可以兼容不同的浏览器
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        // 指定corejs的版本  corejs-模拟js运行环境
                                        "corejs": "3",
                                        // 使用corejs的方式 "usage" 表示按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

    // 配置Webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"
            template: "./src/index.html"
        }),
    ],

    // 用来设置引用模块, .ts .js文件可以作为模块被引入，引入的时候可以省略拓展名
    resolve: {
        extensions: ['.ts', '.js']
    }

};