TypeScript 进阶之路-编译和打包

5,538

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

前言

  • 今天一起来学习一下typescript的编译与打包

编译命令

  • tsc xxx.ts -w 这个命令用于监听单个ts文件更新 并生成js文件
  • 更改后的输出

1633676551(1).png

  • tsc 在目录下使用这个命令会将所有ts生成对应js文件

  • 要在根目录下创建tsconfig.json文件 内容为{} 即可执行tsc命令 否则不成功

  • tsc -w 在目录下使用这个命令会监听目录下所有ts文件的更改,也需要tsconfig.json文件存在

编译配置文件选项

  • tsconfig.json 里的各项配置详解

    • include 用来指定哪些ts文件需要被编译
    • [] 里面放文件路径
    • ** 表示任意目录
    • *表示任意文件
        "include": [
                // 表示编译src目录下的所有ts文件
                "./src/**/*"
            ]
    
    • exclude 不需要被编译的文件目录
    • 默认值 ["node_modules", "bower_componets", "jspm_packages"]
        "exclude": [
            // 表示不编译index目录下的ts文件
            "./src/index/*"
        ]
    
    • extends 定义被继承的配置文件 后面是文件路径
    • 相当于导入外部配置
        // 配置文件复用
        "extends": "./src/base.config.ts",
    
    • files 指定被编译的文件列表
    • 文件需要一个个写入
            "files": [
                // 单个ts文件
            ]
    
  • compilerOptions 配置

    • target 子配置项
    • target 用来指定被编译为的js版本 默认值为ES3版本
       "target": "ES6"
    
    • module 子配置项
    • 模块化解决方案 指定要使用的模块化规范 默认值'none','commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'
        "module": "es2015"
    
    • lib 子配置项
    • 用来指定项目中要使用到的库 一般情况下不需要更改
        "lib": ['dom']
    
    • outDir 子配置项
    • 用来指定编译后的文件目录
        "outDir": "./dist"
    
    • outFile 子配置项
    • 将全局作用域中代码合并为一个指定文件
    • 如果有模块化代码 module应为 amd, system
         "outFile": "./dist/app.js"
    
    • allowJs子配置项
    • 是否对目录中的js进行编译
        "allowJs": false
    
    • checkJs 子配置项
    • 检查目录中的js是否符合规范
        "checkJs": false
    
    • removeComments 子配置项
    • 注释是否被编译
        "removeComments": false
    
    • noEmit 子配置项
    • 生成编译后的文件
        "noEmit": false
    
    • noEmitOnError 子配置项
    • 当有错误的时候不编译成js文件
        "noEmitOnError": false
    
    • alwaysStrict 子配置项
    • 编译后的文件是否开启严格模式
    • 当代码有模块的时候默认进入严格模式 默认为false
        "alwaysStrict": false
    
    • noImplicitAny 子配置项
    • 允许隐式的any类型
        "noImplicitAny": false
    
    • noImplicitThis 子配置项
    • 不允许不明确类型的this
        "noImplicitThis": false
    
    • strictNullChecks 子配置项
    • 严格的空值检查
        "strictNullChecks": false
    
    • strict 子配置项
    • 所有严格的总开关 如果为true 所有严格检查都打开
         "strict": false
    

webpack 打包ts代码

  • 初始化项目 npm init
  • 安装所需依赖 npm i -D webpack webpack-cli typescript ts-loader
  • 编写webpack配置文件 webpack.config.js
const path  = require('path')
    // webpack中所有配置信息都应该写在module.exports中
    module.exports = {
        // 入口文件
        entry:"./src/index.ts",
        // 指定打包文件输出的路径
        output: {
            path:path.resolve(__dirname,'dist'),
            // 打包后的文件
            filename:'bundle.js',
        },
        // 指定webpack打包时使用的模块
        module:{
            // 指定要加载的规则
            rules:[
                {
                    // 指定的是规则生效的文件
                    test:/\.ts$/,
                    // 要使用的loader
                    use:'ts-loader',
                    // 要排除的文件
                    exclude:/node-modules/
                }
            ]
        }
    }
  • 在package.json文件中新增命令 "build": "webpack"
  • 运行npm run build 即可打包

总结