TypeScript 进阶之路-编译和打包

前言

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

编译命令

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

• 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 即可打包

总结

• typescript 编译和打包就到这结束~