配置文件

tsconfig.json

compileOnSave: true：

• 让IDE在保存文件的时候根据tsconfig.json重新生成文件。

compilerOptions: 编译选项，可以被忽略，有默认值

• allowJs：默认为false，是否支持js/.jsx文件
• typeRoots: 默认编译所有@types包，编译指定typeRoots下的所有@types包
• types：只有被列出来的包才会被包含，指定types来禁用自动引入@types包
• 其余选项点击查看文档

files：

• 指定一个包含相对或绝对文件路径的列表,且总是会被包含在内，exclude设置无效

outDir:

• 指定的目录下的文件永远会被编译器排除，除非明确地使用”files”将其包含进来

include:

• 包含编译的文件指定一个文件的glob匹配模式列表

exclude:

• 排除编译的文件指定一个文件的glob匹配模式列表,默认排除 node_modules，bower_components，jspm_packages和<outDir>目录

glob匹配模式列表

• *：匹配0/n个字符
• ?：匹配一个任意字符
• **/：递归匹配任意子目录

给路径配置别名：

• 首先给属性baseUrl: “.”,
• 其次在属性paths中配置
• 注意：在配置时要注意给/*，才可以获取对应文件夹下的文件，一般ts提示飘红，很可能问题出在这
  • 示例:

    "compilerOptions": {
    	"jsx": "preserve",
    	"baseUrl": ".",
    	"paths": {
    		"@/*": ["src/*"],
    		"@component/*": ["component/*"],
    		"@utils/*": ["utils/*"]
    	}
    }

webpack

概念

• 静态模块打包工具，处理应用程序时会在内部从一个或多个入口点构建一个依赖图，将项目中所需的每一个模块组合成一个或多个bundles，这些均为静态资源，用于展示内容。

原理

• 模块捆绑器： 将小块代码编译成更大更复杂的代码，运行在web浏览器

核心

• 入口(entry)、
• 输出(output)、
• loader、
• 插件(plugin)、
• 模式(mode)、
• 浏览器兼容(browser compatibility)、
• 环境(environment)

模块（模块的离散功能块）

• 每个模块的表面积都比完整程序小，这使得验证、调试和测试变得微不足道。
• 良好的模块提供了坚实的抽象和封装边界，因此每个模块在整个应用程序中都具有连贯的设计和明确的目的。

sass at-rules

@use “sass:color” 基于现有颜色生成新颜色

• 参数：
  • color.red(): 用于获取颜色的红色通道
  • color.green(): 用于获取颜色的绿色通道
  • color.blue(): 用于获取颜色的蓝色通道
  • color.hue(): 用于获取颜色的色调
  • color.saturation(): 用于获取颜色的饱和度
  • color.lightness(): 用于获取颜色的亮度
  • color.whiteness(): 用于获取颜色的白度
  • color.blackness(): 用于获取颜色的黑度
  • color.alpha(): 用于获取颜色的 alpha 通道
• 方法：
  • color.scale(): 流畅地缩放的一个或多个属性(不包含本身)
  • color.change(): 将颜色的一个或多个属性设置为新值。返回的是颜色值
  • color.adjust(): 按固定量增加或减少一个或多个属性
  • 透明度：
    • color.scale()
    • color.adjust($color，$alpha：-$amount)（保留现有行为）

@mixin

• 跟@include在一起使用的时候可以把多个样式放在一起。
• 跟@each在一起使用搭配变量遍历meta.keywords(参数)
• 跟@content在一起，定义整个样式的基调，相当于样式的插槽
• 跟@media在一起，只有媒体查询的结果符合时，才会应用这一块内容

@extend 继承

• selector.unify()：函数返回一个与两个选择器的交集匹配的选择器
• selector.extend()：与@extend相似，用于单选择器
• 占位符选择器%：仅用于扩展的样式规则