‘壹’ 干货分享！Web前端开发工具有哪些
1、EnjoyCSS
EnjoyCSS 是一款非常简单的工具，尤其对于不擅长使用CSS的前端开发者来讲。它为用户提供了简单的 UI，让用户可以设计元素，并提供对应的 CSS 输出。
2、Postman
在前端开发的过程中，Postman可以说是必备的开发工具之一。它能在后端检查端点，而且非常好用。它的出色表现让我把它放到了这里。它包含的端点包括 GET、POST、DELETE、OPTIONS 和 PUT 之类。可以称之为绝对不能错过的一款工具。
3、Bit.dev
软件开发的一项基本原则是代码可重用性。这可以减少你的开发工作，因为你无需从头开始构建每个组件。这正是 Bit.dev 所做的。它使你可以共享可重用的代码组件和代码片段，从而减少开销并加快开发流程。它还允许在团队之间共享组件，这使你的团队可以与其他团队更好地协作。
4、StackBlitz
这是所有用户都比较喜欢的在线 IDE 工具。究其原因主要是它将我们最喜欢和最常用的 IDE引入了 Web 端。这个工具允许你一键设置 Angular、React、Ionic、TypeScript、RxJS、Svelte 和其他 JavaScript 框架。一键设置这个功能意味着开发者可以在极短的时间内开始编码。有了StackBlitz，你只需不到几分钟的时间就可以试用新的 NPM 软件包，而无需从头开始在本地创建项目，这就是他的优势所在。
以上就是青藤小编关于Web前端开发工具的全部推荐，大家要是想提高自己的工作效率，现在就赶紧用起来吧!
‘贰’ 前端构建工具和打包工具有啥区别
Webpack是一个前端模块化方案，更侧重模块打包。我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
Webpack就是需要通过其配置文件（Webpack.config.js）中 entry 配置的一个入口文件（JS文件），然后在解析过程中，发现其他的模块，如scss等文件，再调用配置的loader或者插件对相关文件进行解析处理。
两者区别
虽然Gulp 和 Webpack都是前端自动化构建工具，但看2者的定位就知道不是对等的。Gulp严格上讲，模块化不是他强调的东西，旨在规范前端开发流程。Webpack更明显的强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。
以上就是介绍的前端构建工具 Gulp 和 Webpack，以及两者之间的区别。如今互联网发展迅速，Web前端人员也应该与时俱进的不断学习。
‘叁’ 对于前端开发我们需要什么样的工具
作为一个前端开发工程师，使用一款自己上手且功能强大的开发工具是非常重要的，但是面对这么多开发工具，到底哪个比较好呢？下面我个人推荐几款自己感觉还不错的前端开发工具，希望作为大家的参考。
1、hbuilder
作为一个编程的菜鸟，对于英语真的是有心无力，尤其是一些国外的开发工具都是英文界面，我就非常的不喜欢。hbuilder是国产的一款前端开发工具而且是免费的，对于英语不好的前端工程师是一个不错的消息。hbuilder的官方大致是这么解释为什么要开发hbuilder的：HTML最开始其实不是一个编程语言，确实用不着什么ide。但是发展到现在，7w多个语法，js越来越庞大，真开发一个达到原生水准的App，不是用以前的文本编辑器能搞定的。
目前竟然没有一个开发工具能把7w多HTML5语法提示齐全，这不科学，在原生开发里这是不可想象的，xcode之于iOS，eclipse之于Android，vs之于winphone，在语法提示、转到定义、重构、调试等方面都非常高效。作为同时熟悉原生和HTML5开发的我们，我们在开发HTML5时明显感受到效率低下。于是有了hubuilder。确实是hubuilder支持左右的前端语法代码提示，这个是我最喜欢的它的一个原因，而且还有强大的其他语言支持和开发webapp等功能，强大到没朋友。缺点也是有一些的，就是其有些稳定，有时可能会有些卡顿的现象，希望官方修复。
2、sublime text
sublime text是一个轻量级的编辑器，也是支持各种编程语言，sublime text所有的强大功能都是支持插件的，而且快捷键十分的好用，可以极大的减少开发的劳动程度，使用sublime就是要使用其快捷键和插件。该软件的优点的轻量级但是功能强大，缺点是对于项目的管理等不是很方便，代码提示不如hubuilder强大。
3、dreamwave
这是一款很经典的前端开发工具了，以前人们使用的是它的可视化开发工具，但是现在它只能是作为一个代码编辑器来使用的，当然一些可视化的功能现在也是用的上，如要插入Flash视频等还是使用可视化简单一些，毕竟不是所有人都能纯手写哪些意义不大的代码，优点是人们熟悉稳定，支持一些可视化的插入操作，缺点是代码提示不好，不能进行快速的开发只能是作为学习使用。
总结：以上只是前端开发工具中个人比较熟悉的，除此之外还有很多优秀的前端开发工具如webstorm等，大家可根据自己的喜好选择自己习惯的工具进行开发。
‘肆’ Vite入门教程-下一代前端开发与构建工具
直接点说，现市面上的构建工具太慢了（webpack 、 Rollup 和、 Parcel等），Vite直接利用浏览器原生的 ES模块使构建速度更快
使用 NPM:
使用 Yarn:
然后按照提示操作即可！
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：
可以指定额外的命令行选项，如 --port 或 --https。运行 npx vite --help 获得完整的命令行选项列表。
当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js 的文件。
最基础的配置文件是这样的：
注意：即使项目没有在 package.json 中开启 type: "mole"，Vite 也支持在配置文件中使用 ESM 语法。这种情况下，配置文件会在被加载前自动进行预处理。
你可以显式地通过 --config 命令行选项指定一个配置文件（相对于 cwd 路径进行解析）
因为 Vite 本身附带 Typescript 类型，所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示：
另外你可以使用 defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示：
Vite 也直接支持 TS 配置文件。你可以在 vite.config.ts 中使用 defineConfig 工具函数。
如果配置文件需要基于（dev/serve 或 build）命令或者不同的 模式 来决定选项，则可以选择导出这样一个函数：
需要注意的是，在 Vite 的 API 中，在开发环境下 command 的值为 serve（在 CLI 中， vite dev 和 vite serve 是 vite 的别名），而在生产环境下为 build（vite build）。
如果配置需要调用一个异步函数，也可以转而导出一个异步函数：
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
‘伍’ 对于前端自动化构建工具有了解吗
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快。如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。
‘陆’ 前端构建工具webpack有什么缺陷
1.文档缺失，尤其中文文档
长期以来webpack官方文档和example匮乏，提供的一些例子都是很简单那种，经常发现完全按照例子来配置但就是跑不起来，中文文档就更不用说了，少的可怜。这个问题也直接导致下面的第2点。
2.配置难&难调试
稍微复杂一点的项目，如果使用webpack编译，不经过一段痛苦不堪的配置调试过程是没法正常跑起来的。这还没完，在自己机器上跑起来之后可能到了另一个同事哪儿又报错了等等。总之正如下面有人回答那样，配置文件一旦跑起来，是根本不敢去改的，生怕又出错。
webpack的错误提示也非常难看懂，基本不可能从错误很直观的找到原因，长期以来碰到问题只能靠猜，你没看错，就是靠猜！！
3.编译慢
经验不足的同学很容易碰到这个问题，当然可以通过一些手段做优化，比如配置mole的resolve、root等，使用happypack加速、dll提前编译等等。但是笔者曾经尝试过happypack，对编译速度有提升但效果不明显，dll的话我有按照官方文档的做法去做，但是最终编译出来又报了一些莫名其妙的错（也有可能是代码写的有问题），总之心累，后来直接改成externals方式，全局script引入第三方库。
4.对server-render不友好
webpack本质上还是静态打包，意思就是打包完成之后其实文件的加载顺序已经固定，只是被加载的时间不定而已。所以使用webpack原则上不存在按需加载之类的说法，code split其实是人工分隔，但是真实的按需加载场景岂是人工能枚举完的 （下划线这句话不太好解释，也不想过多解释，熟悉前端工程的人应该都明白啥意思）。
在这里我要说的对server-render不友好其实是指html的处理，webpack其实是通过在js里用require标记资源然后加载任意资源（css、图片、fonts等等），但其实html文件才是页面真实的入口，最终编译出的js还是需要引入到html里，为了防止css懒加载导致页面抖动，编译完的css还需要从js里边提取出来放到html外链。
目前一般都是通过html-webpack-plugin来做这个事情，先搜集某个html所引用的静态资源最终自动插入到html。这种方式对于前端渲染的应用没有问题，但是对于server-render的那就不行了，因为server-render下html是作为模板由后端语言吐出，而开发模式下（例如webpack-dev-server）webpack是不会输出任何文件的（开发环境webpack是将文件放到内存然后在路由层自动serve了），所以这会导致开发环境模板无法引用静态资源。当然，有一种解决方案就是静态资源不改变文件名称，预先写好路径，开发环境和生产环境同名（即覆盖式发布）。
‘柒’ Vue3-前端构建工具(Vue-Cli和Vite) & 计算属性 & 侦听器
vue3使用环境：Vue CLI 4.x以上，Node.js版本 8.9以上。
main.js
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。使用 Vite 可以快速构建 Vue 项目。
Vite 需要 Node.js版本 12.0以上。
在Vue3中，定义计算属性，需要引入computed组合式API。computed()函数的参数是一个回调函数，回调函数的返回值，就是计算属性的返回值。
在Vue3中，定义侦听器，需要引入 watch组合式API 。
watch函数 有三个参数：① 侦听谁，② 回调函数，③ 配置对象(可以省略)。如果监听的是一个对象/对象里的某个属性，第一个参数就是一个函数，由该函数返回指定对象中监视的属性。
注意： watch监视对象，默认开始深度监视，并且无法关闭。所以直接监视整个对象不好。vue3建议我们，监视对象时，指定监视对象的属性。如果监视的对象属性也是一个对象，默认不开启深度监视，需要手动开启。
watchEffect()监视器： 只有一个回调函数参数，并且没有参数。特点：① 该回调函数一开始会执行一次；② 不需要明确的去监视谁，回调函数里面用到了谁，谁变了，就会重新执行回调函数。
在Vue2中可以定义过滤器，但是在Vue3中已经取消了过滤器。Vue3推荐我们使用方法 或 计算属性的方式，实现之前过滤器的效果。
在vue3的模板中，不再需要根标签，它内部有一个fragment的组件作为模板的根标签。
‘捌’ 前端构建工具Gulp.js 你知多少..(webpack/gulp/grunt)
@ TOC
阅读本文章之前，相信你已经对前端构建工具(webpack、gulp、grunt)有一定的认知和了解了，那么他们之间究竟有什么区别呢？
gulp文档上面有这么一句话 ，也就是说 gulp是一个自动化构建工具；
gulp的一些功能如下(包括但不限于):
其实Webpack和另外两个并没有太多的可比性
傻瓜式起步照搬官网文档
1.安装
2.在项目根目录下创建一个名为 gulpfile.js 的文件：
3.运行 gulp：
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
具体详情可以查看 gulpjs.com文档
新建一个项目gulp-test
环境:
1.新建文件以下文件如下
其中 gulpfile.js 是我们gulp的配置文件，启动gulp默认会找个这个文件并执行；
2.接下来安装依赖
一直按回车Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁琐的enter步骤)
此时我们的目录结构是这样了
安装依赖
这里页面实时刷新只讲这个 gulp-connect ，其他详情可以参照 Browsersync 和文章 gulp-livereload
安装完依赖后配置gulpfile.js如下:
大概讲解一下gulpfile.js:
gulp.task 是gulp的api 定义一个使用 Orchestrator 实现的任务（task）
如上我们定义了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任务，其中:
my-task-js 是将 符合所提供的匹配模式的js 进行检测(gulp-jshint)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/js目录下；
my-task-css 是将 符合所提供的匹配模式的sass进行编译(gulp-sass)、压缩(gulp-uglify)、合并(gulp-concat)、重命名(gulp-rename)、输出(gulp.dest)到/dist/css目录下；
html 是将 符合所提供的匹配模式的html进行监听，如果有变化则connect.reload()
clean 是如果任务重新启动时 删除旧文件；
default gulp默认启动的任务
watch gulp的api 监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。
server 依赖gulp-connect启动一个服务器
配置完gulpfile.js之后，我们给js和css及html加点东西:
首先js/helloworld.js
css/index.scss
index.html
运行gulp
浏览器效果:
接下来我们修改helloworld.js来看看是否能实时刷新
修改如下:
按保存之后，终端给我们报了一个错:
查看js发现我们用了es6语法的声明语句 但当前gulp无法处理es6语法，有问题解决问题，es6=>es5
解决方案:
安装gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
运行
依然报上面的错；找了一些原因发现，虽然安装了相关依赖，却没有配置.babelrc文件，即babel还没转化es6
根目录添加.babelrc文件
重新运行:
查看dist下的js文件
改变helloworld.js检查页面是否刷新
保存，页面的天空蓝换成你们喜欢的yellow颜色
修改index.scss 查看是否会刷新页面
最后修改index.html 查看是否会刷新页面
今天主要学习了gulp的简单项目搭建及实时更新配置；其实gulp类似于grunt的弱化版，但更简单好用，只是插件会少一些，目前主流的项目搭建工具主要是webpack，但依然有不少项目还用着gulp或者grunt
扩展:
下面还有一些楼主的学习笔记:
有兴趣的可以多多交流@ 楼主博客
‘玖’ 使用requirejs搭建前端项目
本文主要是讲述如何使用requirejs这个模块化管理工具来搭建前端项目结构，适合内网开发以及还在使用比较旧的技术栈（如jQuery）的前端同学。
github地址： https://github.com/wenbin0316/Requirejs-demo.git ，如果对你有帮助，请点个star，谢谢！
requirejs的使用我就一笔带过，主要是讲如何搭建项目结构。
项目基本目录结构如下：
在index.html中引入requirejs本身以及主js文件：
index.js定义了模块的名称和路径，以及模块所需的依赖，并调用了main模块的start方法：
main.js为应用主模块，调用main.start()执行应用初始化，所有的dom创建都在模块内部处理，index.html中只有一个div#main的dom元素。main.js内容如下：
同时在main.js中调用了header模块的start方法。
项目结构按照该思路一层一层构建，简单明了，当然也可以根据个人习惯提取出一些通用的组件，本文就不再赘述。