Node.js
文章平均质量分 56
Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型,让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、Perl、Ruby等语言平起平坐。
泽哥ins
Java开发工程师:田根旺️
展开
-
(51)前端工程化面试题总结
一、什么是 Node.jsNodejs是一个JavaScript的运行环境,是一个服务器端的“JavaScript解释器”,用于方便高效地搭建一些响应速度快、易于扩展的网络应用。它采用事件驱动、异步编程,为网络服务而设计。二、什么是 npmnpm是nodejs包管理和分发的工具,用于管理node包。如安装、卸载、发布、查看等。三、前端工程化解决的问题1. 重复的机械式工作部署上线前,需要**手动**压缩代码和资源文件2. 传统语言或语法的弊端要是用 ES6+ 和 CSS3 的原创 2022-01-22 14:36:12 · 533 阅读 · 0 评论 -
(50)常见命名方式
一、驼峰式命名法例如:HelloWorld(大驼峰,第一个单词首字母大写,第二个单词首字母也大写)例如:helloWorld(小驼峰,第一个单词首字母小写,第二个单词首字母大写)二、C型/蛇形命名法例如:hello_world(多个单词之间使用下划线连接书写方式)三、烤串式命名法例如:hello-world(多个单词之间使用连字符横线连接书写方式)...原创 2022-01-22 14:23:54 · 601 阅读 · 0 评论 -
(49)gulp-load-plugin插件
一、gulp-load-plugin插件的作用作用:自动加载package.json文件中的Gulp插件(简化require引入)二、gulp-load-plugin插件的使用1.安装命令:npm install --save-dev gulp-load-plugins2.再gulpfile.js文件中引入const gulpLoadPlugins = require('gulp-load-plugins')我们通过如上图引入后呢,然后将我们之前引入的带有gulp前缀开头原创 2022-01-22 14:11:35 · 474 阅读 · 0 评论 -
(48)Gulp路由
一、Gulp路由介绍图我们前面再demo案例中指定过路由,那么我们可能不太清楚路由的原理是什么?那么接下来呢,我们来详细说明一下。二、Gulp路由详情解析URL地址:http://localhost:3000指向dist目标目录那么我们地址栏访问:http://localhost:3000/index.html,那么实际访问的是dist/index.html访问http://localhost:3000/node_modules未指定路由:那么访问的是:dist/node_m原创 2022-01-22 12:51:18 · 543 阅读 · 0 评论 -
(47)fs创建多级目录
一、fs创建多级目录说明fs.mkdir('./a/b/c') 这样写可以不可以呢? 答案:不可以。多级目录的创建方式:一般使用递归的方式进行创建。如何操作?先创建./a 再创建./a/b 最后创建./a/b/c如果是删除操作,则反向执行二、递归概述程序调用自身的编程技巧成为递归(recursion),说白了就是自己调用自己,再本方法中不断调用自身方法,再合适的机会结束。还有个我们知道的小故事:从前有座山,山上有个庙,庙里有老和尚和小和尚,老和尚呢给小和尚讲故事,故事的内容是从前原创 2022-01-20 19:33:38 · 2085 阅读 · 0 评论 -
(46)yarn
一、yarn介绍yarn是由Facebook牵头推出的一款JavaScript包管理工具。yarn是为了弥补npm的一些缺陷而出现的。安装命令:npm install -g yarn二、yarn的优点速度快、命令输出信息更简洁、更好的语义化。yarn详情说明文档地址:https://zhuanlan.zhihu.com/p/99186425三、yarn与npm的对比四、yarn总结在npm5.0之前,yarn的优势明显。yarn出现之后,npm做了很多优化(两者之原创 2022-01-19 19:18:52 · 217 阅读 · 0 评论 -
(45)npm全局安装包的位置
一、查看npm全局安装包的位置查看命令:npm config ls二、 查看npm全局安装包的位置演示三、安装一个全局的包测试效果安装standard包,安装前我们检查node_modules目录中没有该包。通过执行命令:npm i standard -g后发现,我们检查node_modules目录中多出来一个该包。说明我们找到的这个全局安装包的文件位置对啦!我们默认的全局安装包的位置是在C盘,那么我们可以改成其他盘吗?因为我们都不想要它安装在C盘,这里给大...原创 2022-01-19 17:57:52 · 8875 阅读 · 0 评论 -
(44)常用终端命令总结
原创 2022-01-19 17:41:52 · 185 阅读 · 0 评论 -
(43)前端工程化总结
解说前端工程化概念前端工程化是开发前端过程中用到的技术的总和。说白了,就是我们日常生活中的项链,它是由主子和线组装成的,那么每一颗珠子都是一个技术,我们把我们学过的技术,例如HTML,CSS,JS,JQuery等等,这些技术用一个线连接起来,就可以做成一个项链,那么这根线就是我们的前端工程化,其实前端工程化就是把我们学的技术汇总起来,连接起来。代码的压缩(htmlmin、imagemin、uglify、cleanCss)注释:压缩html,图片,js,css代码的转换(babel、less、sa原创 2022-01-19 17:32:21 · 262 阅读 · 0 评论 -
(42)Gulp在Yeoman脚手架工具中的应用
一、Gulp在Yeoman脚手架工具中的应用以 Webapp 生成器为例。二、Generator-webapp 服务运行命令三、为什么要学习Gulp我们看到如上图使用yeoman脚手架工具会自动帮我们搭建好gulpfile.js文件,那么我们为什么还要学习里面的内容呢?为了让我们前端开发人员掌握里面的代码是干什么用的。比如说如下图通过如上图我们yeoman脚手架工具搭建的gulpfile.js文件任务是编译的.scss结尾的文件,这一是一款CSS预处理器,是最早的CSS预原创 2022-01-19 17:05:35 · 251 阅读 · 0 评论 -
(41)Gulp Reload热更新
一、Gulp热更新介绍所谓Gulp热更新就是开发服务器中监视文件的变化,我们再发布服务的时候,我们会进行代码修改,那么我们每次修改完代码,都要重新发布服务,这样很麻烦,有没有一种方法可以实时更新呢?当然有啦!它就是为了我们开发中提高效率而生的!它就是Gulp热更新。二、如何实现热更新通过监视src开发目录文件的变化,和dist目标目录文件的变化,进行实时更新,当我们保存的时候,会实时将效果展示到我们的浏览器上。三、Gulp热更新演示1.通过ES6解构方式导入watch监听包c原创 2022-01-19 15:55:58 · 541 阅读 · 0 评论 -
(40)Gulp中使用BootStrap
一、Gulp中安装BootStrap插件二、 示例1.安装bootstrap和jquery包(注意:因为bootstrap是依赖于jquery的)安装命令:cnpm i bootstrap@3.4.1 jquery -S (因为我们上线需要该包,所以要写-S上线模式)这里我们默认安装的包是最新版本的,我们的Bootstrap3和4版本还是有一定的去别的,如果我们学习的是3版本,那么我们安装的时候可以加入@3.4.1这样指定版本的格式进行书写安装,即可实现我们想要的版本的包哦!2.安装好原创 2022-01-19 00:12:09 · 421 阅读 · 0 评论 -
(39) gulp开发服务器
一、Gulp构建任务流程图将dist目标目录文件发布到浏览器上。三、Gulp开发服务器所需要的插件https://browsersync.io/插件官网:https://browsersync.io/四、Gulp开发服务器示例1.安装发布web服务的插件淘宝镜像安装命令:cnpm i browser-sync -D 淘宝镜像会比较快2.导入服务插件和创建服务注意:这个插件和以前的插件不一样,它需要导入后,然后创建一个服务。//导入服务插件const.原创 2022-01-18 23:49:09 · 494 阅读 · 0 评论 -
(38)Gulp任务完整组合写法
一、Gulp任务完整组合写法介绍我们把less文件编译,CSS代码压缩,JS代码压缩,文件重命名,图片压缩,目录删除的任务都创建好了,那么如果我们一个一个单个去进行执行任务命令,太麻烦了,需要写很多条命令,那么我们可以通过组合写法,把这些多个任务名写在一起,存到常量中,常量是存储数据的容器,我们执行常量名即可实现多条const {src,dest,parallel,series} = require('gulp')const less = require('gulp-less')const .原创 2022-01-18 22:39:56 · 148 阅读 · 0 评论 -
(37)Gulp 文件清除
一、Gulp文件清除介绍Gulp文件清除可以将有内容的文件夹清除掉,之前我们清除文件夹的时候,只能够先把文件夹当中的文件先删除,成为一个空目录,我们才能进行删除,通过学习Gulp我们可以直接将有内容文件的文件夹目录删除,无需删除文件夹当中的文件。二、Gulp文件清除所需要的插件三、Gulp文件清除示例1.安装文件清除插件命令:(npm i del -D)2.在gulpfile.js文件中,导入del插件,再定义一个dele删除文件的构建任务。然后调用del()方法去删除目标原创 2022-01-18 17:01:07 · 851 阅读 · 0 评论 -
(36)Gulp 构建资源(图片)文件
一、Gulp 构建资源(图片)文件概述所谓Gulp 构建资源(图片)文件就是将图片占用大小压缩后变小。其实我们Gulp构建资源文件不只是单独只图片,还有其他的比如说字体文件,也是资源文件。这里我们拿图片文件演示。一、Gulp 图片文件所需插件二、Gulp 构建资源(图片)文件示例1.安装压缩图片文件所需要的插件安装命令(npm i gulp-imagemin -D)当我们执行安装命令呢,发现有一个报错。原因是我们下载该插件是要去国外的网站去下载,所以会出现该问题。那么如何解原创 2022-01-14 21:17:34 · 698 阅读 · 0 评论 -
(35)Gulp 构建任务组合
一、Gulp构建任务组合就是前面我们学习的Gulp构建样式文件,构建脚本文件,构建HTML页面文件,每构建一种文件都需要敲写一条命令,那么这样的话,我们就需要写3个命令执行,是不是还是觉得有些麻烦?不用担心我们有组合写法,一条命令搞定3种文件的编译,压缩,重命名的一套,是不是很nice,任务组合yyds!!哈哈~~二、Gulp构建任务组合演示执行结果(一条命令搞定目标文件所有内容)...原创 2022-01-14 14:09:43 · 290 阅读 · 0 评论 -
(34)Gulp 构建HTML页面文件
一、Gulp 构建HTML页面文件概述我们的HTML文件将来再做大型项目时,文件HTML结构代码也是很多的,上传到服务器上线时也是有缓慢压力和内存占用较大的情况的,所以我们为了解决该问题,还需要对HTML文件进行压缩。二、Gulp构建html文件所需插件三、Gulp构建html文件示例1.安装压缩HTML文件插件命令(npm gulp-htmlmin -D)2. 导入gulp-htmlmin模块,然后编写一个任务,然后将任务导出,通过命令(gulp html任务名)执行。..原创 2022-01-14 12:09:48 · 513 阅读 · 0 评论 -
(33)Gulp构建脚本文件
一、构建脚本文件流程图构建脚本文件和我们构建样式文件是一样的,也是将源代码进行编译,编译以后压缩,然后重命名,最终成为目标文件。这里脚本文件压缩是将ES6语法转换成ES5语法,比如说箭头函数,它在IE浏览器下是不支持的,需要转换成ES5的语法,IE浏览器才能够支持。二、Gulp构建脚本文件所需要的插件三、Gulp构建脚本文件示例1.再我们之前写的Demo中,我们继续再src目录下,新建一个scripts文件,再scripts文件下,新建一个main.js文件,并写入一个ES6的原创 2022-01-13 21:03:42 · 533 阅读 · 0 评论 -
(32)Gulp CSS hack 与 Autoprefixer
一、CSS hack介绍• CSS 代码存在兼容性问题。• 同一段 CSS 代码,在不同浏览器上的呈现效果不同。我们可以通过如下图片看到,我们不同的浏览器它的JS引擎不一样,渲染引擎也不一样,因为引擎不一样,所以渲染出来的效果也是不一样的。• 所以我们要针对不同的浏览器写相应的 CSS 代码• 那么我们把针对不同的浏览器写相应的 CSS 代码的过程,叫做 CSS hack!• CSS hack 的目的:就是使你的 CSS 代码兼容不同的浏览器。二、CSS hack – 属性前原创 2022-01-13 12:09:57 · 1372 阅读 · 0 评论 -
(31)Gulp 构建样式文件
一、Gulp构建样式文件流程图Gulp构建样式文件和我们之前想要实现的效果和流程差不多,我们通过源代码,这里拿less文件举例,第一步那么我们通过less文件先将文件进行转换,转换成浏览器认识的css文件,第二步将css文件进行压缩,压缩后的文件除去了空格和注释。第三步将压缩后的css文件改名为.min.css。二、Gulp构建样式文件所需插件三、在Gulp的官网去查找这些插件https://gulpjs.com/打开Gulp官网我们可以再nav导航栏处看到plugins插件列表原创 2022-01-12 20:57:04 · 334 阅读 · 0 评论 -
(30)Gulp 文件操作
一、文件操作方式—缓冲方式缓冲方式就是源文件从内存缓冲中操作,最终得到目标文件,那么有个缺点就是例如我们看一部电影,这个电影的内存大小是10G,那么我们的内存存不下10个G,这时候我们的目标文件会出现错误。二、文件操作方式—流方式流方式就是将一个大的文件,拆分成一个个小的文件,中间通过管道进行传输,一个接一个的进行传输,这样的话,就不是基于内存啦,基于内存还需要考虑内存是否够用的问题。那么Gulp 就是基于 流 的构建系统。三、工作流程图首先读取流会读取我们输入的内容,.原创 2022-01-12 17:03:08 · 487 阅读 · 0 评论 -
(29)Gulp组合任务
一、Gulp组合任务介绍Gulp组合任务就是通过一条命令执行多个任务,执行方式分为并行执行和串行执行。二、npm scripts命令的执行方式并行执行:多个任务一起执行,比如我们日常生活中的百米赛跑,多个人听到枪声后一起开跑!串行执行:多个任务排列执行,就是当一个任务执行完成以后,才能执行下一个任务,依次执行三、Gulp任务的执行方式并行执行:多个任务一起执行,比如我们日常生活中的百米赛跑,多个人听到枪声后一起开跑!串行执行:多个任务排列执行,就是当一个任务执行完成以后,才能原创 2022-01-12 15:55:47 · 788 阅读 · 0 评论 -
(28)自动化构建工具Gulp
一、自动化构建工具介绍Grunt:它是基于临时文件进行构建的。Gulp:它是基于内存进行构建的。是我们目前最流行最常用的自动化构建工具。FIS:它是阿里维护的构建工具,目前不怎么维护了,可以看到该工具上次维护时间还是几年之前。二、自动化构建工具的作用简单来说就是使用工具帮我们把乱七八糟的一些文件整理成我们看起来更简洁的项目结构。三、Gulp 与 npm scripts对比• Gulp 与 npm scripts 都能够实现自动化构建• Gulp 语法简单• G原创 2022-01-11 12:09:23 · 925 阅读 · 0 评论 -
(27)StyleLint—CSS代码格式校验
一、StyleLint介绍StyleLint就是对 CSS 代码格式进行检查。二、使用 StyleLint步骤• 初始化项目( npm init --yes )• 安装 StyleLint ( npm install --global stylelint )• 安装检测标准 ( npm install --global stylelint-config- standard )• 创建配置文件 ( .stylelintrc.json )• 检查 CSS 代码格式• 单个文件 (原创 2022-01-10 20:59:35 · 1231 阅读 · 0 评论 -
(26)ESLint一JS代码格式校验
一、什么是代码格式代码格式即为代码风格,每个程序员再开发的时候,书写代码的风格都是不一样的,比如说,有的人喜欢书写字符串时用双引号,有的喜欢用单引号,有的再书写标签代码缩进时,喜欢用2个空格,有的喜欢用4个空格等一系列的代码格式,每个人都有自己喜欢的代码风格。二、为什么要进行代码格式校验呢• 不同的工程师,写的代码风格不同• 项目代码提交时,需要保持统一的代码格式• 如何实现( 通过工具完成代码格式校验 ),如果自己一点点看,是不是太浪费啦!不用担心,我们有工具帮助我们!• 给工具提原创 2022-01-10 20:45:34 · 970 阅读 · 0 评论 -
(25)npm scripts 实践—构建脚本文件
一、先来看2张对比图通过如下2个图片,我们看到,我们应该构建好以后再进行浏览器中运行。没有构建前是ES6的箭头函数写法,我们要转换成ES5的写法然后再运行。为什么要构建?因为ES6再某些浏览器是不支持的,所以需要转换成ES5写法。二、示例通过如下示例我们可以看到,我们使用ES6语法的箭头函数,执行了一个点击事件,当点击的时候触发函数,弹出一个警示框,我们分别再IE浏览器和谷歌浏览器中进行测试发现,谷歌浏览器实现了效果,说明谷歌浏览器兼容ES6写法,而IE浏览器呢我们再点击的时候没有任何效原创 2022-01-10 19:43:32 · 330 阅读 · 0 评论 -
(24)minify压缩的时候报错
minify命令执行压缩的时候,报如下错误解决方案将node版本升级到v14.18.2,即可解决该问题。原创 2022-01-10 19:31:17 · 482 阅读 · 0 评论 -
(23)npm项目发布
实现项目发布流程安装serve服务命令:npm i serve -g执行命令:serve .(点)浏览器中运行端口号原创 2022-01-10 15:21:13 · 108 阅读 · 0 评论 -
(22)npm scripts 实践—构建样式文件
将 less 转成 css安装less命令:npm i less -g转换命令:lessc input.less output.css压缩 css 文件安装压缩包命令:npm i minify -g压缩css文件命令:minify output.css > output.min.css原创 2022-01-10 15:09:51 · 157 阅读 · 0 评论 -
(21)npm scripts 实现自动化构建的最简方式
一、什么是 npm scriptsnpm 允许在 package.json 文件中,使用 scripts 字段定义脚本命令。二、npm scripts 自定义脚本命令三、自动化构建样式文件原创 2022-01-10 11:55:02 · 606 阅读 · 0 评论 -
(20)自动化构建
一、什么是构建如下图是构建的过程,就是将我们写的源代码进行转换成为生产代码。二、为什么构建(构建内容)• 一些代码需要编译(CSS,JS), 保证浏览器的兼容性;• 将 Less 或 Sass 转换成 CSS• 将 ES6+ 的新语法转成 ES5• 有些代码需要压缩(CSS,JS,HTML,图片等);• 压缩之后的代码体积更小,加载更快,节省带宽• 有些代码需要做格式化校验,统一代码风格;三、源代码转换成生产代码的过程四、示例如下图我们书写的less文件,直原创 2022-01-07 12:04:21 · 207 阅读 · 0 评论 -
(19)脚手架工具Yeoman
一、脚手架工具的由来脚手架工具是前端工程化的发起者。脚手架是我们前端开发再制作网页的时候,可以提前自动生成的骨架,也就是网页的基本结构,通过脚手架可以将我们网页的布局骨架给我们生成,我们直接再该基础上进行开发,可以提高我们的效率,省去很多时间。脚手架就相当于我们搭建房子,建筑,我们的基本架子,只有我们把大概的架子搭好,然后我们再锦上添花,进行搭建。二、脚手架的作用脚手架的作用就是创建项目基础结构、提供项目规范和约定。三、项目基础结构我们的项目基本结构就是如上图这样,app为项目名,原创 2022-01-07 12:00:27 · 452 阅读 · 0 评论 -
(18) Node.js npm包管理工具
一、npm概述npm (Node Package Manager)是 Node.js 的包管理工具。什么是包?包就是一坨代码,就是 Node.js 的第三方模块。例如:JQuery模块,Bootstrap模块npm 是一个命令,跟随 Node.js 一起安装。也就是说我们安装了Node.js会连带一个npm包管理工具一起安装下来。二、测试npm是否安装成功1.快捷键win+r,打开命令提示符,或者再VScode终端当中打开黑窗口。2.输入npm --version命令 或者输入简原创 2022-01-07 11:56:50 · 1068 阅读 · 0 评论 -
(17)Node.js第三方模块
一、Node.js第三方模块介绍所谓第三方模块就是社区维护的 Node.js 模块。前端工程化的大部分工具,都是第三方模块。想要使用 Node.js 的第三方模块,需要通过单独安装。Node.js第三方模块安装地址:https://www.npmjs.com/...原创 2022-01-07 09:41:02 · 174 阅读 · 0 评论 -
(16) Node.js 模块的加载逻辑
一、按照组织方式划分模块文件模块:是我们上一章节说过的,就是一个独立的.js文件。目录模块:是我们可以将多个独立的.js文件统一存放在一个目录下,也就是放到一个文件夹中。二、目录模块的加载逻辑三、模块的加载逻辑注:package.json 是目录模块的描述文件四、示例1在dir01目录下新建3个js文件,分别是a.js、b.js、c.js。三个文件当中呢,函数名都是info,输出的内容呢是对应的文件名称。a.js文件b.js文件c.js文件原创 2022-01-06 20:09:42 · 1739 阅读 · 2 评论 -
(15)Node.js 自定义模块
一、自定义模块介绍程序员自己写的 Node.js 模块。• Node.js 中每个单独的 .js 文件,就是一个模块• 每个模块中都有一个 module 变量,其代表当前模块• module 的 exports 属性是对外的接口• 只有导出(module.exports)的属性或方法才能被外部调用• 未导出的内容是模块私有,不能被外部访问• 使用时,通过 require 引入二、示例circle.js文件//circle模块//当前模块的指代变量, module原创 2022-01-06 12:00:20 · 1389 阅读 · 1 评论 -
(14)Node.js 核心模块—http
一、核心模块 - http模块介绍• http 模块可以发布 web 服务• 使用之前,通过 require 引入• 官方文档:http://nodejs.cn/api/http.html二、示例原创 2022-01-05 20:52:03 · 1190 阅读 · 0 评论 -
(13)Node.js 文件流 缓冲 VS 流
一、文件操作 – 缓冲方式通过把源文件放入内存缓冲中,最后到目标文件。首先先放入内存缓冲中当内存缓冲满为止,才向目标文件进行传输二、文件操作 - 流方式将A作为读取流,然后传输到B写入流,中间传输过程通过一个管道进行传输。三、为什么选择 “流”• 内存效率提高• 无需加载大量数据• 流把大数据切成小块,占用内存更少• 时间效率提高• 接获数据后立即开始处理• 无需等到内存缓冲填满• 我们以前读取文件,是通过readFile然后判断是否存...原创 2022-01-05 20:21:41 · 564 阅读 · 0 评论 -
(12)Node.js核心模块fs—实现文件复制和压缩
一、文件复制将src目录下的style.css文件复制一份,到dist目录下。二、文件压缩文件压缩就是把我们书写的代码中的空格和注释进行删除,这样我们体积会变小,当我们上线到服务器时,给服务器造成的压力就会减小,从而提升传输速度效率。三、案例:将src目录下的style.css文件复制一份,到dist目录下,并且将复制后的文件压缩和更名为style.min.css。// 导入fs模块const fs = require('fs')// 导入path模块const path原创 2022-01-05 16:47:50 · 1548 阅读 · 0 评论