huangpb的博客

还不知道 Vite 为何物的，可以先了解一下我的文章。

Mock.js 是一个用来生成模拟数据，拦截 AJAX 的工具。前后端分离的前端同学会经常使用。 Mock.js 官网地址：http://mockjs.com一、安装 npm install --save mockjs二、示例import Mock from 'mockjs';//不拦截 AJAX 的示例let data = Mock.mock({

一、GitHub Actions 是什么？大家知道，持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为actions。很多操作在不同项目里面是类似的，完全可以共享。GitHub注意到了这一点，想出了一个很妙的点子，允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。如果你需要某个action，不必自己写复杂的脚本，直接引用他人写好的action即可，整个持续集成过程，就变成了一个action...

一、什么是 ViteVite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。二、Vite 和 Webpack 区别Vite 优势：vite 开发服务器启动速度比 webpack 快 webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时

Make 命令教程补充：1. make 命令时报错：Makefile:5: *** missing separator. Stop.原因：Makefile 文件命令前没有 tab，或者 tab 的格式不对。我用的是 VSCode 编辑的 Makefile 文件，可能是编辑器的 tab 跟 make 解析Makefile 时的 tab 不一致。用 vim 编辑Makefile 文件就好了。...

说到 babel，一连串名词会蹦出来：babel-cli babel-core babel-runtime babel-node babel-polyfill ...这些都是 babel 吗？他们分别是做什么的？有区别吗？babel 到底做了什么？怎么做的？简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环...

很多低版本的浏览器不支持 ES6 语法，这就需要用到 Babel 转码器把 ES6 代码转换成 ES5。在 Babel6 之前，Babel 是一个整体。但在 Babel6 中，将 Babel 拆分成两个包：babel-cli 和 babel-core。如果你想在 CLI（终端或 REPL）使用 Babel 就下载 babel-cli，如果想在 node 中使用就下载 babel-core。...

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。这意味着，你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持。下面是一个例子。  上面的原始代码用了箭头函数，这个特性还没有得到广泛支持，Babel将其转为普通函数，就能在现有的JavaScript环境执行了。一、配置文件.babelrcBabel的配置文件是.babelrc，存...

今天在 Mac 上全局安装 webpack、webpack-dev-server 时，虽然命令前都加了 sudo，安装时还是报了权限不足的错误：解决方法如下：sudo npm install webpack -g --unsafe-perm=true --allow-root或sudo npm install webpack -g --unsafe-perm=true...

功能类html-webpack-plugin *自动生成html，基本用法：new HtmlWebpackPlugin({ filename: 'index.html', // 生成文件名 template: path.join(process.cwd(), './index.html') // 模班文件})copy-webpack-plugin拷贝资源插件基本...

1. 安装 TypeScript 相关依赖包    安装依赖包的时候注意版本，因为我现在用的是 webpack@3.10.0，所以相对应的 ts-loader 包版本不能太高，不然编译时会报错。npm i -g typescript@2.7.2npm i --save-dev typescript@2.7.2 ts-loader@3.1.12. 创建 TypeScript 的配置文...

转载自：http://www.jianshu.com/p/3bdff821f859Webpack dev server使用http-proxy解决跨域问题文档资料webpack关于webpack-dev-server开启proxy的官方介绍Vue-cli proxyTable 解决开发环境的跨域问题——虽然这篇是写vue的，不过用在webpack-dev-serve

有人会问 webpack-dev-server 已经是热加载了，能做到只要代码修改了页面也自动更新了，为什么在 react 项目还要安装 react-hot-loader 呢？其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了...

Mock常用手段分类1硬刚型将模拟数据直接写在代码里优点：简单暴力缺点：改变了代码原有逻辑，且耦合度高，当后端接口完成的时候还需要再改代码。2拦截型mockjsmockjs通过改写ajax函数来实现拦截请求，同时它还能伪造各种随机数据，通过mockjs我们能很方便的实现简单的mock效果，优点：简单方便缺点：在chrome里面没法看请求（查看传递的参数是否...

1. 选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架。选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等。一般来说，一个现成的项目模板会预定义一定的目录结构、书写方式，在编写项目代码时需要遵循相应的规范；也会内置必要的...

随着互联网的发展，我们的业务也日益变得更加复杂且多样化起来，前端工程师也不再只是做简单的页面开发这么简单，我们需要面对的十分复杂的系统性问题，例如，业务愈来愈复杂，我们要如何清晰地梳理；团队人员愈来愈多，我们要如何更好地进行团队协作；功能愈来愈多，我们要如何保证页面的性能不至于下降，等等。所有的这些都可以归结为如何提升开发体验和性能问题。提升开发体验我们主要从以下三个方面来提升...