![](https://img-blog.csdnimg.cn/bcfaf13d5197438889f3b8345b724520.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端工程师8——TypeScript、Vite
文章平均质量分 96
TypeScript、Vite、Ant Desig、Mock项目所需
ChrisP3616
C2在读硕士
展开
-
Vite(六)配置 Vite
Vite(六)配置 Vite文章目录Vite(六)配置 Vite1. 配置 Vite#配置文件#配置文件解析#配置智能提示#情景配置#共享配置#root#base#mode#define#plugins#publicDir#resolve.alias#resolve.dedupe#resolve.conditions#resolve.mainFields#resolve.extensions#css.modules#css.postcss#css.preprocessorOptions#json.name原创 2021-10-27 16:49:23 · 7054 阅读 · 4 评论 -
Vite(五)插件API(钩子hook)、HMR API、JavaScript API
Vite(五)插件API(钩子hook)、HMR API、JavaScript API文章目录Vite(五)插件API(钩子hook)、HMR API、JavaScript API1. 插件 API约定简单示例引入一个虚拟文件转换自定义文件类型通用钩子Vite 独有钩子`config``configResolved``configureServer``transformIndexHtml``handleHotUpdate`插件顺序Rollup 插件兼容性路径规范化2. HMR API必需的条件守卫`hot原创 2021-10-27 16:29:56 · 1790 阅读 · 2 评论 -
Vite(四)后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js
Vite(四)后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js文章目录Vite(四)后端集成、比较Snowpack、从 v1 迁移、Awesome Vite.js1. 后端集成2. 比较SnowpackWMR@web/dev-server3. 从 v1 迁移配置项变化别名用法变化Vue Support自定义块转换React 支持HMR API 变化Manifest 格式变化写给插件作者4. Awesome Vite.js#Resources#Official Resource原创 2021-10-27 15:16:07 · 1143 阅读 · 2 评论 -
Vite(三)部署静态站点(wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI)、环境变量与模式、服务端渲染(SSR)
Vite(三)部署静态站点(wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI)、环境变量与模式、服务端渲染(SSR)文章目录Vite(三)部署静态站点(wordpress与hugo与Vercel、CI/CD、Travis CI、GitLab CI)、环境变量与模式、服务端渲染(SSR)1. 部署静态站点构建应用本地测试应用GitHub PagesGitHub Pages 配合 Travis CIGitLab Pages 配合 GitLab CINetlifyG原创 2021-10-27 11:34:12 · 2142 阅读 · 2 评论 -
Vite(二)依赖预构建、静态资源处理、构建生产版本
Vite(二)依赖预构建、静态资源处理、构建生产版本文章目录Vite(二)依赖预构建、静态资源处理、构建生产版本1. 依赖预构建原因自动依赖搜寻Monorepo 和链接依赖自定义行为缓存文件系统缓存浏览器缓存2. 静态资源处理将资源引入为 URL显式 URL 引入将资源引入为字符串导入脚本作为 Worker`public` 目录3. 构建生产版本浏览器兼容性公共基础路径自定义构建多页面应用模式库模式网址:https://vitejs.cn/guide/why.html1. 依赖预构建当你首次原创 2021-10-26 17:28:45 · 3038 阅读 · 2 评论 -
Vite(一)为什么选 Vite、开始、功能(NPM依赖解析和预构建、HMR、CSS、构建优化)
Vite(一)为什么选 Vite、开始、功能(NPM依赖解析和预构建、HMR、CSS、构建优化)文章目录Vite(一)为什么选 Vite、开始、功能(NPM依赖解析和预构建、HMR、CSS、构建优化)1. 为什么选 Vite现实问题缓慢的服务器启动缓慢的更新为什么生产环境仍需打包为何不用 ESBuild 打包?Vite 与 X 的区别是?2. 开始总览浏览器支持搭建第一个 Vite 项目社区模板`index.html` 与项目根目录指定替代根目录命令行界面使用未发布的功能社区3. 功能NPM 依赖解析和预原创 2021-10-26 16:27:30 · 1186 阅读 · 1 评论 -
TypeScript(八)代码检查(AlloyTeam 的 ESLint、Prettier)、编译选项(allowJs、allowSyntheticDefaultImports)
TypeScript(八)代码检查(AlloyTeam 的 ESLint、Prettier)、编译选项(allowJs、allowSyntheticDefaultImports)文章目录TypeScript(八)代码检查(AlloyTeam 的 ESLint、Prettier)、编译选项(allowJs、allowSyntheticDefaultImports)1. 代码检查什么是代码检查为什么需要代码检查在 TypeScript 中使用 ESLint安装 ESLint创建配置文件检查一个 ts 文件检查原创 2021-10-26 11:06:16 · 702 阅读 · 2 评论 -
TypeScript(七)泛型、声明合并、扩展阅读
TypeScript(七)泛型、声明合并、扩展阅读文章目录TypeScript(七)泛型、声明合并、扩展阅读1. 泛型简单的例子多个类型参数泛型约束泛型接口泛型类泛型参数的默认类型参考2. 声明合并函数的合并接口的合并类的合并参考3. 扩展阅读网址:https://ts.xcatliu.com/1. 泛型泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。简单的例子首先,我们来实现一个函数 createArray,它可以创建一原创 2021-10-25 20:53:33 · 961 阅读 · 1 评论 -
TypeScript(六)类、类与接口
TypeScript(六)类、类与接口文章目录TypeScript(六)类、类与接口1. 类类的概念ES6 中类的用法属性和方法类的继承存取器静态方法ES7 中类的用法实例属性静态属性TypeScript 中类的用法public private 和 protected参数属性readonly抽象类类的类型参考2. 类与接口类实现接口接口继承接口接口继承类参考网址:https://ts.xcatliu.com/1. 类传统方法中,JavaScript 通过构造函数实现类的概念,通过原型链实现继原创 2021-10-25 19:29:56 · 180 阅读 · 2 评论 -
TypeScript(五)枚举、元组、内置对象、类型别名、字符串字面量类型
TypeScript(五)枚举、元组、内置对象、类型别名、字符串字面量类型文章目录TypeScript(五)枚举、元组、内置对象、类型别名、字符串字面量类型1. 内置对象ECMAScript 的内置对象DOM 和 BOM 的内置对象TypeScript 核心库的定义文件用 TypeScript 写 Node.js参考2. 类型别名简单的例子参考3. 字符串字面量类型简单的例子参考4. 元组简单的例子越界的元素参考5. 枚举简单的例子手动赋值常数项和计算所得项常数枚举外部枚举参考网址:https://原创 2021-10-25 17:00:32 · 130 阅读 · 1 评论 -
TypeScript(四)声明文件、全局变量(三斜线指令)、npm包、UMD库、发布声明文件
TypeScript(四)声明文件、全局变量(三斜线指令)、npm包、UMD库、发布声明文件文章目录TypeScript(四)声明文件、全局变量(三斜线指令)、npm包、UMD库、发布声明文件1. 声明文件新语法索引什么是声明语句什么是声明文件第三方声明文件书写声明文件全局变量npm 包UMD 库直接扩展全局变量在 npm 包或 UMD 库中扩展全局变量模块插件声明文件中的依赖(三斜线指令-适用于全局变量引用)**三斜线指令****书写一个全局变量的声明文件****依赖一个全局变量的声明文件**自动生成声原创 2021-10-25 11:38:26 · 951 阅读 · 2 评论 -
TypeScript(三)类型断言、数组的类型、函数的类型
TypeScript(三)类型断言、数组的类型、函数的类型文章目录TypeScript(三)类型断言、数组的类型、函数的类型1. 数组的类型「类型 + 方括号」表示法数组泛型用接口表示数组类数组any 在数组中的应用参考2. 函数的类型函数声明函数表达式用接口定义函数的形状可选参数参数默认值剩余参数重载参考3. 类型断言语法类型断言的用途将一个联合类型断言为其中一个类型将一个父类断言为更加具体的子类将任何一个类型断言为 `any`将 `any` 断言为一个具体的类型类型断言的限制双重断言类型断言 vs原创 2021-10-24 21:51:09 · 6273 阅读 · 1 评论 -
TypeScript(二)数据类型、任意值、类型推论、联合类型、接口(Interfaces、可选属性?:、任意属性、只读属性)
TypeScript(二)数据类型、任意值、类型推论、联合类型、接口(Interfaces、可选属性?:、任意属性、只读属性)文章目录TypeScript(二)数据类型、任意值、类型推论、联合类型、接口(Interfaces、可选属性?:、任意属性、只读属性)1. 原始数据类型布尔值数值字符串空值Null 和 Undefined参考2. 任意值什么是任意值类型任意值的属性和方法未声明类型的变量3. 类型推论什么是类型推论参考4. 联合类型简单的例子访问联合类型的属性或方法参考5. 对象的类型——接口(I原创 2021-10-24 16:18:23 · 3016 阅读 · 1 评论 -
TypeScript(一)TypeScript 的特性(静态类型、弱类型)、编译时报错、安装
TypeScript(一)TypeScript 的特性(静态类型、弱类型)、编译时报错、安装文章目录TypeScript(一)TypeScript 的特性(静态类型、弱类型)、编译时报错、安装1. 什么是 TypeScriptTypeScript 的特性类型系统TypeScript 是静态类型TypeScript 是弱类型适用于任何规模与标准同步发展总结2. 安装 TypeScript编辑器3. Hello TypeScript网址:https://ts.xcatliu.com/1. 什么是原创 2021-10-24 15:05:43 · 3659 阅读 · 1 评论