编译

监控单个文件, 自动编译

• tsc index.ts -w

监控文件夹下的所有文件, 自动编译

1. 使用 tsc --init 在文件夹中新建 tsconfig.json 文件
2. 在命令行输入 tsc 即可监控文件夹下的所有文件

tsconfig.json 文件配置

{
    // 指定哪些 ts 文件需要被编译
    // ** 表示任意目录
    // * 表示任意文件
    // "./src/**/*" 表示 src 文件夹下的所有文件夹中的所有文件
    "include": ["./src/**/*"],

    // 指定哪些文件不需要被编译, 该项有默认值, 默认值是 ["node_modules","bower_components","jspm_packages"]
    "exclude": [],

    // 指定哪些文件需要被继承
    // 继承 configs 中 base.json 文件中的所有配置
    "extends": "./configs/base",

    // 指定要编译的文件, 当要编译的文件比较少的时候可以用
    "files": ["index.ts","core.ts"],

    // complierOptions 是用来设置编译器选项
    "complierOptions": {
        // target 用来指定 ts 文件被编译的 js 的版本, 默认是转换成 ES3
        // 查看可以设置的版本: 在下面的值中随便写一个错误的值, 然后在控制台编译的时候会报错, 其中就有提示说可以设置哪些版本
        "target": "es6",

        // module 是用来指定使用哪一种模块化规范
        // 查看可以设置的版本的方法和上面 target 查看版本的方法一样
        "module": "es6",

        // lib 用来指定项目中要使用的库, 一般情况下不需要设置
        // 查看可以设置的内容的方法和上面 target 查看版本的方法一样
        // "lib": [],

        // outDir 用来指定编译后的文件放在哪个目录
        "outDir": "./dist",

        // outFile 用来指定编译后要输出到哪个文件, 可以将全局作用域中的代码全都放到一个文件中, 用的不是很多
        // 将全局作用域中的代码全都放到 ./dist/app.js 文件中
        // "outFile": "./dist/app.js"

        // allowJs 是否对 js 文件进行编译, 默认是 false
        "allowJs": false,

        // checkJs 是否检查 js 文件中的语法, 默认是 false
        "checkJs": false,

        // removeComments 编译后是否删除注释, 默认是 false
        "removeComments": false,

        // noEmit 不生成编译后的文件, 默认值是 false, 用的不多
        "noEmit": false,

        // noEmtiOnError 当有错误时, 不生成编译后的文件, 默认值是 false
        "noEmitOnError": false,

        // alwaysStrict 用来设置编译后的 js 文件是否使用严格模式, 默认值是 false, 当文件中有使用模块的导入导出的时候, 会自动进入到严格模式, 此时是没有 use strict 显示的
        "alwaysStrict": false,

        // noImplicitAny 是否允许隐式的 any 类型存在, 默认是 false, 表示允许
        "noImplicitAny": false,

        // 是否允许不明确类型的 this 出现, 默认值是 false, 表示允许
        "noImplicitThis": false,

        // 是否严格检查空值, 默认值是 false, 表示允许空值存在
        "strictNullChecks": false,

        // 所有严格检查的总开关, 默认值是 false, 表示表示所有关于严格检查的设置都不开启, 如果设置为 true, 则表示所有关于严格检查的设置都开启
        "strict": false
    }
}

webpack 打包 ts 文件

• 安装 ts-loader

• npm i -D @babel/core @babel/preset-env babel-loader core-js

• webpack.config.js 配置文件

    const path = require('path')
  
    module.exports = {
        // 入口文件
        entry: './src/index.ts',
  
        // 打包后的目录
        output: {
            // 设置打包后的目录
            path: path.resolve(__dirname, 'dist'),
            // 打包后的文件名
            filename: 'bundle.js',
  
            // 告诉 webpack 不要使用箭头函数
            environment: {
                arrowFunction: false
            }
        },
  
        // 指定 webpack 打包的时候使用的 loader
        module: {
            // 指定 loader 的规则
            rules: [
                {
                    // 指定规则生效的文件
                    test: /\.ts$/,
                    // 使用 ts-loader 来处理 ts 文件
                    use: [
                        // 配置 babel
                        {
                            loader: 'babel-loader',
                            // 设置 babel
                            options: {
                                // 设置运行环境
                                presets: [
                                    [
                                        // 指定环境的插件
                                        '@babel/preset-env',
                                        // 配置信息
                                        {
                                            // 兼容的浏览器版本
                                            targets: {
                                                'chrome': '88'
                                            },
                                            // 指定使用 corejs 的版本
                                            "corejs": '3',
                                            // 表示使用 corejs 的方式: usage 表示按需加载
                                            "useBuiltIns": 'usage'
                                        }
                                    ]
                                ]
                            }
                        },
                        'ts-loader'
                    ],
                    // 打包的时候排除 node-modules 文件中的文件
                    exclude: /node-modules/
                }
            ]
        },
  
        // 用来设置引用模块
        resolve: {
            // 以 ts, js 结尾的文件都可以作为模块来使用
            extensions: ['.ts', '.js']
        }
    }