[TS基础]TS的编译选项，WebPack打包TS代码

一.基础配置选项

1.1 tsc [xxx.ts] -w的使用

• 编写完TS代码之后,需要执行tsc xxx.ts将TS代码编译转换为JS才能正确执行。这样每次修改每次都进行手动编译不是很方便，可以使用tsc xxx.ts -w来监听文件是否有变化，一旦检测文件发生变化，就会实时的将TS转换成JS。

1.2 引入tsconfig.json文件

• 1.1中的方法在只有一个TS文件的时候还比较方便,但是文件一多起来,想要实时生成所有的JS文件也会变得麻烦,这个时候就可以通过tsconfig.json文件来配置TS的编译信息
• 可以在对应项目目录下直接新建文件,或者通过命令行tsc --init来创建该文件信息
• 有了tsconfig.json之后,通过tsc就能编译项目下所有的TS文件,通过tsc -w就能监视所有的TS文件并编译

1.3 基础配置选项

• 引入tsconfig.json之后,虽然可以“一键”编译,但是有时我们只希望编译其中一部分的ts代码,这时,就需要我们对tsconfig.json文件进行一定的配置,以满足我们对编译项目的要求
• include:指定需要编译的文件或目录,*表示任意文件,**表示任意目录
• exclude:指定不需要编译的文件或目录
• extents:可以复用之前已有的json文件,减少重复配置
• file:用于指定单个的文件,范围较小不常用

{
  /*
    tsconfig.json是ts编译器的配置文件,ts编译器可以根据它的信息来对代码进行编译
  */

  //inclode用来指定哪些ts文件需要被编译  可*表示任意文件  可**表示任意目录
  "include": [
    "./src/**/*"  //表示当前的src目录下的任意目录的任意文件都被编译
  ],

  //配置不希望被编译的文件,一般不用进行配置
  //有默认值:["node_modules", "bower_components", "jspm_packages"]
  "exclude": [
    "./src/test_file/**/*"
  ],

  //定义需要继承的配置文件,避免重复配置
  //"extends": "",

  //直接指定需要编译的文件,不常用,项目比较小的时候适用
  "files": [
    "./src/test_file/test_case.ts"
  ]
}

1.3.1.compilerOptions编译器选项

• target：用来指定编译TS文件时使用的ES版本，默认为兼容性较好的ES3
• module：指定编译时需要使用的模块化规范
• lib：用来指定编译时需要使用的库文件，一般不用动
• outDir：用于指定编译结束后的文件输出位置
• outFile：将不同代码合并为一个文件(对上述module取值有要求)
• allowJs:是否对JS文件进行编译，默认false
• checkJs：是否检查JS文件是否符合语法规范
• removeComments：是否移除注释
• noEmit：不生成编译后的文件
• noEmitOnError：当有语法错误时不生成编译后的文件
• alwaysStrict：编译后的文件是否启用严格模式
• noImplicitAny：是否禁止显示的Any类型
• noImplicitThis：是否允许类型不明的This
• strictNullChecks：严格检查语法中可能出现的null的值
• strict：所有严格模式的总开关，建议打开

  "compilerOptions": {
    // 用来指定TS文件编译时的ES版本，默认为ES3
    // 可取值：es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'esnext
    "target": "ES5",
    // 指定需要使用的模块化的规范
    // 可取值：'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'
    "module": "System",
    // 用来指定项目中需要使用到的库文件, 随便赋值后可以查看具体值,一般情况下不需要动
    //"lib": []

    // 用于指定编译结束后的文件输出的位置
    "outDir": "./dist",

    // 用来将不同代码合并为一个文件,将编译输出的js文件合成一个文件
    // 这个选项是对module文件有一定要求的
    "outFile": "./dist/outJS.js",
    
    // 是否对js文件进行编译,默认false
    "allowJs": false,

    // 是否检查js代码是否符合语法规范
    "checkJs": false,

    // 是否移除注释,默认false
    "removeComments": false,

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

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

    // 用来设置编译后的文件是否使用严格模式
    "alwaysStrict": false,

    // 是否禁止隐式的any类型
    "noImplicitAny": false,

    // 不允许类型不明确的this
    "noImplicitThis": false,

    // 严格的检查null的值,让编译器检测出有可能是null的值
    "strictNullChecks": false,

    // 所有严格检查的总开关,打开的话所有的严格检查都会打开
    "strict": false
  }

WebPack打包TS代码

1.初始化

• 使用npm init -y命令,在新项目的根目录下新建package.json文件
• 使用npm i -D webpack webpack-cli typescript ts-loader导入依赖工具包

2.完善配置信息

• 新建一个webpack.config.js配置文件,编写配置信息

// 导入一个包
const path = require('path');

// webpack 中的所有的配置信息都应该写在module.export中
module.exports = {
    // 指定入口文件
    entry: "./src/index.ts",

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

    // 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules:[
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: 'ts-loader',
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    }
};

• 新建一个tsconfig.json文件,添加配置信息

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

• 在之前生成的package.json文件中添加"build":"webpack"

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"  // 除了这个都是之前自动生成的
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

• 配置结束后便可以通过npm run build命令将项目进行打包了

3.html插件的引入

• 类似的使用npm i -D html-webpack-plugin命令可以引入插件,它可以帮助我们生成html文件
• 之后在webpack.config.json文件中配置html插件

...
// 引入html插件
const HTMLPlugin = require("html-webpack-plugin");
...
// webpack 中的所有的配置信息都应该写在module.export中
module.exports = {
    // 配置Webpack的插件
    plugins: [
        new HTMLPlugin({
            title: "MyWebPack",  // 设定html网页的标题
            template: "./src/index.html", // 设定生成的html网页的模板
        }),
    ]
};

4.webpack-dev-server的引入

• 通过npm i -D webpack-dev-server引入本地服务器,根据项目的改变自动的刷新
• 配置package.json文件

{
...
  "scripts": {
    ...
    "start": "webpack serve --open edge.exe"
  },
...
}

这时通过```npm start命令就可以实时的打开网页并修改我们的代码了

5.clean-webpack-plugin的引入

• 通过npm i -D clean-webpack-plugin命令引入该插件,可以帮助我们及时的清理生成的目录当中的旧文件,保持文件最新
• 在webpack.config.json文件中进行配置

...
// 引入clean插件
const CleanPlugin = require("clean-webpack-plugin");
...
    // 配置Webpack的插件
    plugins: [
        ...
        new CleanPlugin(),
    ]
};

6.解除文件相互引用时的报错

• 当有多个ts文件之间存在相互引用的时候,webpack打包时就容易报错这时需要通过配置webpack.config.json文件来解决这个问题

module.exports = {
...
    // 用来设置引用的模块的
    resolve: {
        extensions: ['.ts', '.js']
    }
};

// 文件1: data.ts文件
export const myName = 'iFinder'

//文件2: index.ts文件
import { myName } from "./data"

// 这个时候没有webpack.config.json中的配置就会报错
console.log(myName)

7.badel的引入

• 同一套代码在不同的浏览器上执行可能会遇到兼容性问题，这个时候可以通过引入babel工具来解决这样的问题
• 通过npm i -D @babel/core @babel/preset-env babel-loader core-js来引入相应的模块
• 修改webpack.condig.json文件中的配置信息

...
module.exports = {
...
    module: {
        // 指定要加载的规则
        rules:[
            {
                ...
                use: [
                    { //配置babel 
                        loader: "babel-loader",
                        options: {
                            // 设置预定义的环境
                            presets:[
                                [
                                    // 指定环境插件
                                    "@babel/preset-env",
                                    { // 配置信息
                                        // 要兼容的目标浏览器
                                        targets:{
                                            "chrome":"88"
                                        },
                                        // 指定corejs的版本
                                        "corejs":"3",
                                        // 使用corejs的方式 "usage" 表示按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },
...
};

• webpack在打包的过程中会自动生成箭头表达式,需要禁用的话需要配置相应的属性

...
// webpack 中的所有的配置信息都应该写在module.export中
module.exports = {
   ...
    // 指定打包文件所在的目录
    output: {
        ...
        environment: {
        // 禁用箭头表达式
            arrowFunction: false
        }
    },
...
};

笔记说明

笔记markdown文件+项目源码
B站对应视频