typescript 学习总结(2)

一.编译选项

1. 自动编译文件

• 编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
• 示例:

tsc xxx.ts -w

2. 自动编译整个项目

• 如果直接使用tsc指令，则可以自动将当前项目下的所有ts文件编译为js文件
• 但是能直接使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json
• tsconfig.json是一个JSON文件，添加配置文件后，只需 tsc 命令即可完成对整个项目的编译

生成配置文件tsconfig.json
tsc --init

3. 主要配置选项

• include 定义希望被编译文件所在的目录

默认值：["**/*"]
示例：
"include":["src/**/*", "tests/**/*"]
上述示例中，所有src目录和tests目录下的文件都会被编译

• exclude 定义需要排除在外的目录

默认值：["node_modules", "bower_components", "jspm_packages"]
示例:
"exclude": ["./src/hello/**/*"]
上述示例中，src下hello目录下的文件都不会被编译

• 严格检查

strict
启用所有的严格检查，默认值为true，设置后相当于开启了所有的严格检查

• outDir 编译后文件的所在目录

默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置
示例:
"compilerOptions": {
    "outDir": "dist"
}
设置后编译后的js文件将会生成到dist目录

• module 设置编译后代码使用的模块化系统

可选值：
- CommonJS、UMD、AMD、System、ES2020、ESNext、None
示例：
"compilerOptions": {
    "module": "CommonJS"
}

• target 设置ts代码编译的目标版本

可选值：
- ES3（默认）、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
示例：
"compilerOptions": {
    "target": "ES6"
}

二.webpack 打包 ts

• 通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS。
• 步骤：

1. 初始化项目

• 进入项目根目录，执行命令 npm init -y
• 主要作用：创建package.json文件

2. 下载构建工具

• npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

共安装了7个安装包
1.webpack
构建工具webpack
2.webpack-cli
webpack的命令行工具
3.webpack-dev-server
webpack的开发服务器
4.typescript
ts编译器
5.ts-loader
ts加载器，用于在webpack中编译ts文件
6.html-webpack-plugin
webpack中html插件，用来自动创建html文件
7.clean-webpack-plugin
webpack中的清除插件，每次构建都会先清除目录

3. 根目录下创建webpack的配置文件webpack.config.js

// 引入一个包
const path = require("path");
// 引入 html 插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
引入 clean
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// webpack 中所有的配置信息
module.exports = {
    optimization:{
        minimize: false // 关闭代码压缩，可选
    },
	// 指定入口文件
    entry: "./src/index.ts",
    
    devtool: "inline-source-map",
    
    devServer: {
        contentBase: './dist'
    },
	// 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, "dist"),
        // 打包后文件的文件
        filename: "bundle.js",
        environment: {
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },
	// 用来设置引用模块
    resolve: {
        // 告诉我们凡是以 .ts 和 .js 结尾的都可以引用
        extensions: [".ts", ".js"]
    },
    // 指定webpack打包时要使用模块
    module: {
        rules: [
            {
                 // test 指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: {
                   loader: "ts-loader"     
                },
                // 要排除的文件
                exclude: /node_modules/
            }
        ]
    },
	// 配置 webpack 插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // title:'TS测试',
            // 复制 './src/index.html'  文件,并自动引入打包输出的所有资源
            template:'./src/index.html'
        }),
    ]

}

4. 根目录下创建tsconfig.json，配置可以根据自己需要

{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

5. 修改package.json添加如下配置

{
  ...省略其它代码...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  ...省略其它代码...
}

6. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

三.Babel

• 经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。

1. 安装依赖包

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

共安装4个包,分别是:
1.@babel/core
babel的核心工具
2.@babel/preset-env
babel的预定义环境
3.@babel-loader
babel在webpack中的加载器
4.core-js
core-js用来使老版本的浏览器支持新版ES语法

2. 修改webpack.config.js配置文件

// 引入一个包
const path = require('path')
// 引入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入 clean 
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// webpack 中所有的配置信息
module.exports = {
    // 指定入口文件
    entry:"./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 指定打包文件的目录
        path:path.resolve(__dirname,'dist'),
        // 打包后文件的文件
        filename:'bundle.js'
    },
module: {
    rules: [
        {
            test: /\.ts$/,
            // 要使用的 loader
            use: [
                // 配置babel
                {
                    // 指定加载器
                    loader: "babel-loader",
                    // 设置babel
                    options:{
                        // 设置预定义的环境
                        presets: [
                            [
                                // 指定环境插件
                                "@babel/preset-env",
                                // 配置信息
                                {
                                    // 要兼容浏览器
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    // 指定corejs的版本
                                    "corejs":"3",
                                    // 使用corejs的方式 "usage" 表示按需加载
                                    "useBuiltIns": "usage"
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader",

                }
            ],
            exclude: /node_modules/
        }
    ]
},
    // 配置 webpack 插件
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // 复制 './src/index.html'  文件,并自动引入打包输出的所有资源
            template:'./src/index.html'
        })
    ],
    // 用来设置引用模块
    resolve: {
        // 告诉我们凡是以 .ts 和 .js 结尾的都可以引用
        extensions:['.ts', '.js']
    }
}

• 使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。
• 运行 npm run start

总结:本篇文章就是关于typescript的编译选项,还有用webpack构建工具对代码进行打包,开发中还需要经常结合babel来对代码进行转换以使其可以兼容到更多的浏览器,这就是今天的学习解决