SakuraSnow's Blog

前言我觉得事情不大对，好像我之前几篇，太长了，以后我尽量控制下长度 babel 官网：https://babeljs.io/中文网(非官方)：https://www.babeljs.cn/ babel是一个编译器，可以把不同标准书写的语言，编译为统一的、能被各种浏览器识别的语言 babel转化的方式和postcss差不多，都是本身只提供一些分析的功能，具体的转化依靠的是插件 安装babelbabel可以和构建工具联合使用，也可以独立使用 如果要独立的使用babel，需要安装下面两个库： @babel/core：babel核心库，提供了编译所需的所有api @babel/cli：提供一个命令行工具，调用核心库的api完成编译 1npm install @babel/core @babel/cli -D @babel/cli提供了一个命令babel 12345# 按文件编译babel 要编译的文件 -o 编辑结果文件# 按目录编译babel 要编译的整个目录 -d 编译结果放置的目录 比如说 1babel ./src/index.js -o ./src/script/index ...

前言没想到吧，这个系列还能出4，这篇会介绍Webpack中Css的相关内容，一些JavaScript的内容留到下个文章了。 CSS工程化为什么要进行css工程化在前端项目开发中，CSS是不可或缺的一部分，在前端项目不断变得庞大，复杂的今天，传统的CSS在开发中也暴露了一些问题，这驱使前端开发者不断寻找CSS工程化的最佳实践 传统开发会使用一个link标签引入CSS样式 1<link rel="stylesheet" href="index.css"> 这种开发模式有下面几个弊端 类名冲突：当页面复杂时，如果层级太浅，很容易导致类名冲突，但是过深的层级会导致代码的编写，阅读和复用变得困难，在打包时也难以压缩代码体积 重复样式：在页面中，有一些重复的值（比如主题色）会重复出现在代码中，难以维护和复用 CSS文件细分问题：在大型项目里，我们希望把CSS按照不同的模块来拆分，这样更有利于维护，比如一个轮播图模块，我们希望依赖的css样式只关心轮播图，这就要求css可以按照不同的模块，功能来拆分，css会比过去拆分的更细。 怎么解决上面的 ...

前言这是这个系列的第三篇了，这篇讲讲一些Webpack配置，还有常见的扩展 Webpack配置项entry入口入口起点指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，Webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的，并进行相应的解析和打包操作。 12345678910111213// 简写module.exports = { entry: './path/to/my/entry/file.js'};// 对象写法,一般针对多入口的情况, 属性名代表chunk的名称module.exports = { entry: { app: './src/app.js', adminApp: './src/adminApp.js' }}; output出口配置打包后的输出文件 12345678910111213141516171819202122// 把打包后 ...

前言嘛，这是这个系列的第二篇，上篇随缘介绍了Webpack的基本配置和打包的基本过程和原理，这篇文章我们来介绍Webpack中两个很重要的扩展功能，loader和plugin LoaderLoader简介还记得这张图嘛，Webpack支持对各种文件进行打包 但是Webpack本身只支持对js文件进行解析打包，因为AST抽象语法树的解析只能针对js 那对其他的文件怎么处理呢，其实很简单，我们对其他文件使用loader进行解析和处理，把它转化成一个可以转化成AST的代码就可以了 Loader的配置新建一个src/index.css 123456:root, body { height: 100%;}body { background: darkseagreen;} 修改src/index.js 123import add from "./cal.js";import "./index.css";console.log(add(Math.random(),Math.random())); 运 ...

前言啊哈，这是一个系列文章，用于记录webpack的学习，因为每次都是学了就忘，所以打算写个笔记总结一下各个操作 这是这个系列的第一篇 为什么要使用webpack 嘛，其实就是为了解决一些开发和线上运行时的一些需求而已 开发时 支持模块化开发（提高代码的可维护性，避免手动维护JS代码的加载顺序和全局作用域污染等问题） 支持使用第三方模块，比如npm下载的模块（调库一时爽，一直调库一直爽) 支持多种模块化标准 (各个库使用的模块化规范不同) 能使用scss，less这样的预处理语言 能够解决其他工程化的问题 运行时 文件尽可能少 (在http2没出现时，传输文件需要建立新的tcp连接，开销很高) 文件体积尽可能小 (毕竟用户的流量要钱，而且可以加快页面打开的速度) 代码内容尽可能乱 (代码混淆) 代码的浏览器兼容性要好 能够解决其他运行时的问题，主要是执行效率问题 解决方案我们需要一个工具，这个工具在开发时能让开发者使用前端工程化的思想对项目代码进行更好的组织和管理，也能让开发者不必担心全局作用域污染这样和业务逻辑无关的问题而是专注于开发业务代码，在运行时要让代码更高效，这个工具 ...

软件测试软件质量的含义软件质量是与软件产品满足明确或隐含需求的能力有关的特征和特征的总和，其含义有以下四个方面 能满足给定需求的特性（在功能，性能等方面都符合要求） 能满足用户综合期望的程度（有友好的用户界面，便于用户使用） 具有所期望的各种属性的组合的程度（软件结构良好，便于修改和维护） 软件的组合特性（软件生存周期中各阶段文档齐全，规范，便于配置管理） 软件测试的定义软件测试就是为了发现错误而执行程序的过程。 在IEEE提出的软件工程标准术语中，软件测试被定义为：使用人工或自动手段来运行或测试某个系统的过程，其目的在于检验它是否满足规定的需求或弄清楚预期结果与实际结果之间的差别 软件测试的目的 发现软件缺陷和错误 对软件质量进行度量和评估 保证软件产品的最终质量 软件测试的原则 尽早测试 全面测试 全过程测试 独立的，迭代的测试 Pareto原则 完全测试是不可能的，测试需要终止 妥善保存一切的测试过程文档 软件测试的VW模型V模型反映出了测试活动和分析设计活动的关系，但是也存在一定的局限性，它仅仅把测试作为编码后的一个阶段，是针对程序运行寻找错误的活动，而忽视了测试活动对 ...

由于需要搭建自己的博客，为了节省自己的时间，可以快速搭建属于自己的专属博客，我根据Haukeng大佬的推荐和全程指导，选择了HEXO框架，通过把博客放在GitHub上然后用Vercel提供的服务实现私人博客，最后通过Vercel的域名配置搭配上我的专属域名。 安装 Environment 以及 Theme安装 Nodejs Scoop包管理Package包安装Linux$ scoop install nodejs前往 NodeJs 下载并安装$ dnf module install nodejs 安装Hexo 1npm install hexo-cli -g 安装主题(butterfly) 12345mkdir blog && cd bloggit inithexo initgit submodule add https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterflyhexo g 然后在博客根目录运行hexo s即可开始在本地运 ...