highlight: arta

theme: mk-cute

前言

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

编译命令

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

Typescript打包时关闭所有文件的类型检查 typescript打包成类库_typescript

  • tsc 在目录下使用这个命令会将所有ts生成对应js文件
  • 要在根目录下创建tsconfig.json文件 内容为{} 即可执行tsc命令 否则不成功
  • tsc -w 在目录下使用这个命令会监听目录下所有ts文件的更改，也需要tsconfig.json文件存在

编译配置文件选项

  • tsconfig.json 里的各项配置详解
  • include 用来指定哪些ts文件需要被编译
  • [] 里面放文件路径
  • ** 表示任意目录
  • *表示任意文件

json "include": [ // 表示编译src目录下的所有ts文件 "./src/**/*" ]

  • exclude 不需要被编译的文件目录
  • 默认值 ["nodemodules", "bowercomponets", "jspm_packages"]

json "exclude": [ // 表示不编译index目录下的ts文件 "./src/index/*" ]

  • extends 定义被继承的配置文件 后面是文件路径
  • 相当于导入外部配置

json // 配置文件复用 "extends": "./src/base.config.ts",

  • files 指定被编译的文件列表
  • 文件需要一个个写入

json "files": [ // 单个ts文件 ]

  • compilerOptions 配置
  • target 子配置项
  • target 用来指定被编译为的js版本 默认值为ES3版本

json "target": "ES6"

  • module 子配置项
  • 模块化解决方案 指定要使用的模块化规范 默认值'none','commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext' json "module": "es2015"
  • lib 子配置项
  • 用来指定项目中要使用到的库 一般情况下不需要更改

json "lib": ['dom']

  • outDir 子配置项
  • 用来指定编译后的文件目录 json "outDir": "./dist"
  • outFile 子配置项
  • 将全局作用域中代码合并为一个指定文件
  • 如果有模块化代码 module应为 amd， system

json "outFile": "./dist/app.js"

  • allowJs子配置项
  • 是否对目录中的js进行编译

json "allowJs": false

  • checkJs 子配置项
  • 检查目录中的js是否符合规范

json "checkJs": false

  • removeComments 子配置项
  • 注释是否被编译

json "removeComments": false

  • noEmit 子配置项
  • 生成编译后的文件

json "noEmit": false

  • noEmitOnError 子配置项
  • 当有错误的时候不编译成js文件

json "noEmitOnError": false

  • alwaysStrict 子配置项
  • 编译后的文件是否开启严格模式
  • 当代码有模块的时候默认进入严格模式 默认为false

json "alwaysStrict": false

  • noImplicitAny 子配置项
  • 允许隐式的any类型

json "noImplicitAny": false

  • noImplicitThis 子配置项
  • 不允许不明确类型的this

json "noImplicitThis": false

  • strictNullChecks 子配置项
  • 严格的空值检查

json "strictNullChecks": false

  • strict 子配置项
  • 所有严格的总开关 如果为true 所有严格检查都打开

json "strict": false

webpack 打包ts代码

  • 初始化项目 npm init
  • 安装所需依赖 npm i -D webpack webpack-cli typescript ts-loader
  • 编写webpack配置文件 webpack.config.js

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

总结