Mack Liu-CSDN博客

原创 webpack4 plugin 的原理和实现部分plugin

webpack4 plugin 的原理和实现部分plugin1.Pluginplugin 本质上就是一个类,有一个 apply 方法，接受一个 complier 的对象, 我们会在 complier 对象上钩子挂载一些监听函数，当 complier 对象上这些钩子触发的时候，就会调用这些函数插件向第三方开发者提供了 webpack 引擎中完整的能力，使用阶段式的构建回调，开发者可以引入它们...

2020-03-05 19:19:27 1159

原创学习webpack4的总结笔记

webpack4webpack 核心概念Entry: 入口：Webpack 执行架构的第一步将从 Entry 开始，可以抽象成输入(入口)。Module: 模块：在 Webpack 里一切都是模块，一个模块对应着一个文件，Webpack 会从配置的 Entry 开始递归找出所有的依赖模块。Chunk: 代码块：一个 Chunk 由多个模块组合而成，用于代码合并与分割。Loader: 模...

2020-02-27 16:23:57 506

原创 vscode前端工程师，使用插件(个人总结)

vscode前端工程师，使用插件1. vscode-iconsvscode文件/文件夹图标插件，设置好看的icon2. vscode wxmlvscode编辑微信小程序wxml文件的插件3. Visual Studio IntelliCodevscode代码只能提示，例如一些对象有什么属性会提示出来等的插件4. vetur这个就不用说了，vue.js框架专用插件5. vueHelperv...

2020-02-23 21:09:00 1027

原创 nodejs企业级开发框架nest学习总结 - 7.NestJS入门swagger，快速搭建restfulApi文档

swaggerswagger：一个功能强大的高清格式来描述RESTful API。Nest提供了专用的模块来使用它1. 安装swaggeryarn add @nestjs/swagger swagger-ui-express --save如果使用fastify，则必须安装fastify-swagger而不是swagger-ui-express：yarn add @nestjs/swag...

2019-10-25 19:48:43 5333

原创 nodejs企业级开发框架nest学习总结 - 6.NestJS入门一些快速创建controller、module和test三个文件的命令、使用websocket

1.初始化项目nest new webscoket-demo2.安装webscoket相关依赖yarn add @nestjs/websockets @nestjs/platform-socket.io @types/socket.io3.创建网关// events.gateway.tsimport { Client } from 'socket.io';import { Web...

2019-10-23 16:50:25 1991

原创 nodejs企业级开发框架nest学习总结 - 5.NestJS入门使用mongoose、multer、验证、缓存、安全等

mongoose、multer、验证、缓存、安全等官方nestjsAPI地址1.nestjs结合mongoose1.1 安装mongoose和nest相关cnpm i @nestjs/mongoose mongoose --save1.2 配置连接数据库方式1，直接配置// mongo.module.tsimport { Module } from '@nestjs/commo...

2019-09-15 15:16:43 2353

原创 nodejs企业级开发框架nest学习总结 - 4.NestJS入门Authentication认证，TypeORM数据库连接

NestJS入门Authentication认证，TypeORM数据库连接官网API点击这里跳转1.Authentication依赖包安装(passport-jwt)yarn add @nestjs/passport passport passport-local @types/passport-local @nestjs/jwt passport-jwt @types/passport-j...

2019-09-05 13:45:08 3184 3

原创 Nest恶补Typeorm - Typeorm快速入门学习(结合typescript)

Typeorm快速入门学习简单粗暴，主要和mongoose差不多的使用功能，快速学习官方githubAPI（点击跳转）官方API（点击跳转）1.安装(和官方一样使用mysql,其它数据库请安装其它的依赖包)npm install typeorm reflect-metadata @types/node mysql --save2.TypeScript编译器版本3.3或更高版本，并且您...

2019-09-04 22:09:08 11176 5

原创 nodejs企业级开发框架nest学习总结 - 3.NestJS入门guard、interceptor、customDecorator、循环引用、注入作用域、生命钩子等

NestJS入门guard、interceptor、customDecorator、循环引用、注入作用域、生命钩子等官方API地址(点击跳转)点击跳转到个人的博客（前面两节）1.guard-守卫（每个中间件之后执行，但在任何拦截器或管道之前执行。）1.1简单例子,守卫需要实现CanActivate接口// guard/auth.guard.ts@Injectable() // 守卫必须...

2019-09-03 16:48:58 2387

原创 nodejs企业级开发框架nest学习总结 - 2.NestJS入门middleware、exceptionFilter、Pipe。

NestJS入门middleware、exceptionFilter、pipe。前面一节介绍了NestJS的controller、DTO、providers、module等的学习1.middleware中间件是在路由处理程序之前调用的函数。中间件函数可以访问请求和响应对象，以及next()应用程序请求 - 响应周期中的中间件功能。中间件例子:core跨域中间件、bodyparser中间件、...

2019-09-01 23:00:36 2999 1

原创 nodejs企业级开发框架nest学习总结 - 1.NestJS入门controller、DTO、providers、module

NestJS入门controller、DTO、providers、module。官方API地址https://docs.nestjs.com/Nest（或NestJS）是一个用于构建高效，可扩展的Node.js服务器端应用程序的框架。也可以在Nest中使用express框架的扩展安装(官方也有推荐) npm i -g @nestjs/cli //全局安装脚手架 nest new proj...

2019-09-01 17:35:21 2843

原创在react vue中使用graphql接口/type-graphql接口

在react vue中使用graphql接口/type-graphql接口后台代码实现:Type-GraphQL结合装饰器写法的node框架的学习笔记提示：1为vue中使用graphql的操作，2为react中使用graphql的操作1.在vue中使用graphql安装脚手架 vue create test =>选中typescript支持1.1 安装依赖，依赖有点多，有七个ya...

2019-08-24 13:06:32 989 1

原创 nuxt+typescript+elementUI+vuex的搭建过程和nuxt的基本使用

nuxt+typescript+elementUI+vuex的搭建过程和nuxt的基本使用

2019-08-23 23:15:55 1928

原创 Type-GraphQL结合装饰器写法的node框架的学习笔记

Type-GraphQL结合装饰器写法的node框架Type-GraphQL用装饰器的写法和一些改进的做法，让graphql的写法更加的清晰的在TypeScript中实现 Type-GraphQL官网地址(点击跳转)还不怎么知道什么是graphql的可以先查看这个博客了解一下GraphQL的一些curd操作在express和koa的使用笔记(点击跳转)1.graphQL依赖安装yarn ...

2019-08-23 19:49:05 1584

原创 GraphQL的一些curd操作在express和koa的使用笔记总结

GraphQL的一些curd操作在express和koa的使用笔记（typescript版本，可以自行转换成js版本）GraphQL，特点是减少http请求过程中太多无用字段造成的请求量过多，需要什么字段就接受什么字段，加快了http请求过程的速度,减少冗余，同时也有一些它的缺点1.安装graphql、express-graphql ( Koa的话安装koa-graphql、koa-mount...

2019-08-23 15:53:53 431

原创 routing-controllers、class-validator、typedi的使用总结

routing-controllers、class-validator,typedi的使用总结由于typescript的版本书写的nodejs的接口用之前的方式书写有些不够清晰，也不能提现出typescript的特色，所以就使用了如上几个库书写typescript的接口,类似于后端框架的写法如果需要深入学习，请前往github官方API深入学习，以下是个人学习后的一些总结。官方API地址(h...

2019-08-23 14:50:14 4123

原创 React进阶用法和hooks - 5.useRef,useImperativeHandle和forwardRef的结合使用以及useLayoutEffect、useDebugValue的简单使用

5.useRef,useImperativeHandle和forwardRef的结合使用以及useLayoutEffect、useDebugValue的简单使用

2019-08-18 21:27:09 11493 2

原创 TypeScript结合React全家桶(antd、axios、Nextjs)的一些类型总结

TypeScript结合React、Vue、express的一些类型总结(一些常用自带的类型)1.React类型总览(包括React本身、router、antd的类型)1.1 React本身常用类型

2019-08-18 18:50:16 8025

原创 React进阶用法和hooks的个人使用见解(Typescript版本) - 4.useReducer+useContext+createContext的使用、模拟redux合并reducer

4.useReducer+useContext+createContext的使用、模拟redux合并reducercreateContext:一个创建上下文函数，执行产生一个上下文对象，包含两个属性，Provider组件和Consumer组件Provider:用来包裹整合组件，传递一个value属性，把context上下文注入到整个组件当中Consumer组件，在里面使用函数调用Provid...

2019-08-17 12:18:30 4319

原创 React进阶用法和hooks的个人使用见解(Typescript版本) - 3.useCallback+useMemo+memo性能优化

3.useCallback+useMemo+memo性能优化场景使用当父组件引入子组件的情况下，往往会造成组件之间的一些不必要的浪费，下面我们通过例子来了解一下场景3.1创建一个test.tsx文件，我们拷贝上篇博客的useState的案例import React, { useState } from 'react';function Test() { const [count, ...

2019-08-17 11:18:30 6513 3

原创 React进阶用法和hooks的个人使用见解(Typescript版本) - 2.hooks的useState、useEffect、自定义钩子的实际使用

2.hooks的useState、useEffect的实际使用（Typescript）从React16.8版本的hooks正式发布，hooks的使用是越来越火，从而出现了许多使用无状态组件(函数)+hooks替代有状态组件(类)来书写React组件的热潮，但是由于一些实际运用还有些缺乏，接下来介绍一下useState、useEffect两个hooks的一些简单使用吧2.1 useState：官...

2019-08-17 10:28:27 11781 1

原创 React进阶用法和hooks的个人使用见解(Typescript版本) - 1.lazy+Suspense懒加载的使用

React高级用法和hooks的个人使用见解（如有侵权，请联系我）1.lazy+Suspense懒加载组合，替换loadable懒加载依赖库lazy+Suspense的简单实例1.创建routeConstants.ts路由常量模块,暴露出常量/** * 登录页面的url */export const LOGIN_PATH = '/login';/** * 错误页面url / ...

2019-08-17 09:36:52 2570

原创 vue/cli3+typescript+vuex的一些简单使用

vue/cli3+typescript+vuex的一些简单使用(如有侵权，请联系我)安装的过程就不用说了，相信到这里的大佬都是有一些水平的人(脚手架自带选项可以选择typescript支持)1.vue-property-decorator的一些装饰器的使用App.vue简单示例vue-property-decorator提供如下七个装饰器和一个Mixins混合以及Vue类(来自官方)@C...

2019-08-16 19:21:57 3589

原创 react-typescript的一些简单使用，引入antd、redux，按需加载

react脚手架typescript版本整合redux、antd按需加载的简单使用(如有侵权，请联系我)1.下载create-react-appcnpm i create-react-app -g //全局下载react脚手架,mac用户加上sudo2.创建react项目(注意：进入启动测试一下项目是否能正常运行)create-react-app ts-react-study --typ...

2019-08-16 17:29:20 3420

原创 redux、scss/less、antd按需加载、typescript整合nextjs

nextjs整合redux、typescript、antd按需加载案例步骤:(如有侵权，可以留言，

2019-08-16 16:14:20 1922 1

原创模拟redux的combineReducers函数合并reducer，使用createContext, useContext, useReducer整合多个reducer案例

一个整合多个reducer的useRedcuer的案例1.redux-custom.tsximport React, { Context, createContext, useContext, useReducer } from 'react';/** * @createContext ProviderContext 一个创建完毕的context*/const ProviderCon...

2019-08-15 18:44:29 1774

原创使用useReducer替代redux，简单的整合多个reducer小案例，半成品

由于最近hooks越来越火，出现了useReducer替代redux的热潮。模拟redux的combineReducers来整合多个reducer成一个reducers的案例1.定义两个reducerexport const initialReucer1 = { count: 1}export const initialReucer2 = { user: {}}exp...

2019-08-15 16:00:58 4537 8

原创 webpack4 - loader 的执行过程和部分常用loader原理实现

webpack4 - loader 的执行过程和部分常用loader原理实现1.loader 运行的总体流程 1.Compiler.js中会将用户配置与默认配置合并，其中就包括了loader部分 2.webpack就会根据配置创建两个关键的对象 ———— NormalModuleFactory 和 ContextModuleFactory , 他们相当于是两个类工厂，通过其可以创...

2020-02-29 20:08:38 1278

mackJun的博客