前端进阶(8) - 前端开发需要了解的工具集合:webpack, eslint, prettier, ...
前端开发需要了解的工具集合:webpack, eslint, prettier, ...
前端开发需要了解的一些工具,这些工具能够帮助你在项目开发中事半功倍。
1. nrm: npm
registry 管理器
registry
: npm
远程仓库的地址。
由于众所周知的原因,npm
官方仓库在国内特别的慢,所以我们需要用一些替代性方案,一种方案就是切换 npm
registry 到国内的镜像仓库。
所以,一般我们会这样做:
# 切换到淘宝 npm 仓库
npm config set registry https://registry.npm.taobao.org/
但是这样做会比较麻烦,因为切换的时候得记住 registry 的 url 地址。所以就需要 nrm 来管理 npm
registry。
安装
npm install -g nrm
内置的 registry
npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/
使用
# 切换到 taobao registry
nrm use taobao# 切换到 npm 官方 registry
nrm use npm# 添加自己的 registry
nrm add yourName yourRegistry
2. cnpm: 使用国内镜像仓库的 npm
客户端
相当于是 npm 的一个克隆版本,它的命令中除了 publish
之外,其他的与 npm
的命令一致。内部默认使用的是国内的 npm
代码仓库 https://cnpmjs.org/,当然你也可以改为自己的。
如果你不喜欢使用 nrm 切换 npm
registry,可以把 npm
和 cnpm
这两者一起用。
另外,它一般还会和 cnpmjs.org 配合使用。
安装
npm install -g cnpm
3. yarn: 类似 npm
的依赖管理工具
类似 npm
的依赖管理工具,但 yarn
缓存了每个下载过的包,所以再次使用时无需重复下载,同时利用并行下载以最大化资源利用率,因此安装速度更快。
并且在开发 react-native 应用程序时,是强烈建议使用 yarn 的,因为如果非要用 npm, 必须使用 npm < 5 版本。
安装
npm install -g yarn
4. webpack: 前端打包工具
现在前端打包基本上都会用 webpack,它不仅能打包源代码文件(如 js, css, html, ts, ...
),还能打包静态资源文件(如 images, fonts, ...
),并且还能打包按需加载 SPA 应用。总之,webpack
是前端打包的不二选择。
安装
# 全局
npm install -g webpack# 本地
npm install --save-dev webpack
5. babel: es6 -> es5 转码器
有 babel 在,你就可以写最新版的 JavaScript 语法(es6, es7, es2015, ...
),然后由 babel
把你的源代码转码成你所需要的 JavaScript 语法,比如浏览器端运行的 es5
。babel
一般都是配合 webpack、rollup、parcel 等打包构建工具一起使用,详细参考 babel - setup。
安装
# 全局
npm install -g babel-cli# 本地
npm install --save-dev babel-cli
6. eslint: js 语法(包括 jsx 语法)检查与矫正
这个工具能够检查 js 语法(包括 jsx 语法),然后最大程度的矫正不符合规范的代码。对于提升个人代码质量,保证团队代码规范和代码风格是相当有用的。
eslint 一般会配合 husky 与 lint-staged 一起使用。详细用法可以参考 怎样提升代码质量。
安装
# 全局
npm install -g eslint# 本地
npm install --save-dev eslint
7. stylelint: css 语法(包括 less, scss 语法)检查与矫正
这个工具能够检查 css 语法(包括 less, scss 语法),然后最大程度的矫正不符合规范的代码。对于提升个人代码质量,保证团队代码规范和代码风格是相当有用的。
stylelint 一般会配合 husky 与 lint-staged 一起使用。详细用法可以参考 怎样提升代码质量。
安装
# 全局
npm install -g stylelint# 本地
npm install --save-dev stylelint
8. prettier: 代码格式优化
这个工具能够优化 js, jsx, ts, css, less, scss, json, md, ...
,对于保证团队代码风格是相当有用的。
prettier 一般会配合 husky 与 lint-staged 一起使用。详细用法可以参考 怎样提升代码质量。
安装
# 全局
npm install -g prettier# 本地
npm install --save-dev prettier
9. gulp: 基于流的自动化构建工具
在 webpack 出现之前,前端的构建任务很多都是由 gulp 来完成的。webpack
出现之后,gulp
在打包构建这一块功能则退居二线,但是 webpack
只负责代码打包,很多其他工作还是由 gulp
来完成,比如上传打包文件到服务器,让打包文件进行更多流操作等。所以,很多情况下都是 gulp
与 webpack
配合使用。
安装
# 全局
npm install -g gulp# 本地
npm install --save-dev gulp
10. jest: js 测试库
在 Facebook 内部,包括 react 应用在内的所有 JavaScript 代码都是用 jest 来测试的。它的一个理念就是提供一套完整集成的 “零配置” 测试体验。所以,使用 jest
来测试 JavaScript 是一件很愉快的事情。
安装
npm install --save-dev jest
11. enzyme: react 组件测试库
jest 只是单纯用来测试 JavaScript 的,而 react
组件的测试,就需要用到 airbnb 出品的 enzyme 了。一般 enzyme
会和 jest
一起使用。
安装
npm install --save-dev enzyme enzyme-adapter-react-16
12. react-devtools: chrome 开发者工具插件 for react
这是专门针对 react 组件开发的 chrome 开发者工具插件,就像开发者工具的 Elements
一样,可以查看整个页面的 react
组件树和每个组件的属性和状态,并且可以动态的更改属性和状态,然后会更新 UI 到应用上。
安装
通过 chrome 应用商店安装 chrome - react-developer-tools.
其他安装方式查看 react-devtools.
13. redux-devtools 与 redux-devtools-extension: chrome 开发者工具插件 for redux
这是专门针对 redux 开发的 chrome 开发者工具插件,就像 react-devtools 一样,可以查看整个页面的 redux
store 及其变化,并且可以动态的派发 action
,然后会更新 UI 到应用上。
13.1 安装 redux-devtools
这种安装方式,redux-devtools
会嵌入到页面中,成为页面的一部分。
npm install --save-dev redux-devtools# 还可以安装
npm install --save-dev redux-devtools-log-monitor
npm install --save-dev redux-devtools-dock-monitor
更多信息参考 redux-devtools - Walkthrough.
13.2 安装 redux-devtools-extension
这种安装方式是成为浏览器开发者工具的一个插件。
通过 chrome 应用商店安装 chrome - redux-devtools.
其他安装方式查看 redux-devtools-extension.
14. vue-devtools: chrome 开发者工具插件 for vue
这是专门针对 vue 组件开发的 chrome 开发者工具插件,就像开发者工具的 Elements
一样,可以查看整个页面的 vue
组件树和每个组件的 data
,并且可以动态的更改 data
,然后会更新 UI 到应用上。
安装
通过 chrome 应用商店安装 chrome - vuejs-devtools.
其他安装方式查看 vue-devtools.
15. 后续
更多博客,查看 https://github.com/senntyou/blogs
作者:深予之 (@senntyou)
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
前端进阶(8) - 前端开发需要了解的工具集合:webpack, eslint, prettier, ...相关推荐
- 前端进阶垫脚石-前端工程化
什么是前端工程化 前端工程化,就是降本提效的体现 广义上,前端工程化包含一切以降低成本.提高效率.保障质量为目的的手段 通过一系列的规范.流程.工具达到研发提效.自动化.保障质量.服务稳定.预警监控等 ...
- 狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用
参考资料 文章目录 01 大前端基础知识概述 02 概述和前端工具VSCode安装 03 Nodejs的安装 04 Nodejs了解和快速入门 05 Nodejs实现htppserver服务 06 N ...
- 【前端进阶】前端进阶知识补充
文章目录 一.ES6 模块化 (一)认识 ES6 模块化 1.JS 模块化分类 2.ES6 模块化定义 3.node.js 中体验 ES6 模块化 (二)基本语法 1.默认导出/导入 2.按需导出/导 ...
- 开发常用在线小工具集合
https://www.sojson.com/ #json的转换加密等各种操作 https://c.runoob.com/ # 菜鸟工具 https://tool.jisuapi.com/ #站长工具 ...
- 初级前端到高级前端的进阶之路
如今,经济整体呈现走低的情形下,已经不再像以往那样好找工作了,前端岗位也不例外,这一点相信大家都有所体会,特别是求职者和招聘者两方人马各找各的的现象,更是令大伙满腹牢骚. 导致这种情况出现的原因是多方 ...
- 自学前端开发,前端进阶阶段需要学习哪些知识?
今天要跟大家分享的文章是关于web前端进阶阶段需要学习哪些知识?已经入门web前端想要提升自己技术的小伙伴们来和小编一起看一看本篇文章吧,希望本篇文章能够对大家有所帮助. 1.完善我们的基础知识 (1 ...
- 大前端进阶!NodeJS、Npm、Es6、Babel、Webpack、模块化开发
文章目录 大前端进阶 一.Node.js 1.1.Nodejs介绍和安装 1.2 .Nodejs入门 1.2.1.快速入门-Hello World 1.2.2.Node - 实现请求响应 1.2.3. ...
- 3万6千字爆肝,前端进阶不得不了解的函数式编程开发,含大量实例,手写案例,所有案例均可运行
3w6爆肝,前端进阶不得不了解的函数式编程开发,含大量实例,手写案例,所有案例均可运行 认识函数式编程 函数相关复习 函数是一等公民 高级函数 函数作为参数 案例 1,模拟 forEach 案例 2, ...
- 前端入门 前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...
最新文章
- iOS--优秀博客记录
- R语言caret包构建xgboost模型实战:特征工程(连续数据离散化、因子化、无用特征删除)、配置模型参数(随机超参数寻优、10折交叉验证)并训练模型
- 95后程序员晒出工资单:狠补了这个,真香…
- NPoco for MySQL 配置
- 响应式布局想法和实现
- java jdbc连接oracle_Java使用JDBC连接Oracle 11gR2
- Python EFZ文件 气象_python的日常应用-gt;入门篇01
- html li去掉黑点_10分钟教你Python爬虫(上) HTML和爬虫基础
- 试验一下纯手写blog
- numpy linspace
- 数据结构实现时的注意事项
- stl vector与list详细对比
- 善用佳软站长:畅谈大数据时代的知识管理
- 开源Java CMS建站程序推荐
- 关于Eclipse安装插件出现An error occurred while collecting items to be installed解决办法
- C# 阿里云 短信api接口
- tomcat如何知道WebRoot是web根目录?
- 期货基础知识(竞价,定价,保证金计算)
- java bks证书_jks bks 等的定义 如何将jks转化为bks的
- matlab 的谱相减语音增强算法的研究,基于MATLAB的谱相减语音增强算法的研究
热门文章
- java字符串除法函数,java – 函数式编程:如何处理函数式编程中的异常或它的等价物...
- mysql maxconnections 最大值,MySQL性能优化之max_connections配置参数浅析
- 生产管理erp系统源码_仁和ERP企业管理系统提高生产管理流程
- Java生鲜电商平台-用户管理的架构与实战
- 王之泰201771010131《面向对象程序设计(java)》第九周学习总结
- JavaScript常用函数之Eval()使用
- iOS开发UI篇—字典转模型
- Redis服务器的启动过程分析
- Struts2中 Path (getContextPath与basePath)
- 解决mysql不能远程登入的问题