前端进阶（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许可证）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/253500.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CMOS图像传感器——TOF 图像传感器

CMOS图像传感器——TOF 图像传感器

一、3D成像技术概述 图像传感器一直以来都是人类研究的热点。但随着当代科学技术发展， 人类对于传统的 2D 图像传感器的要求越来高，不仅期望着更高分辨率，更快速度，更大的动态范围，人类加希望能够获得物体深信息，但是 2D 成 像技术现在已经不能满足人类的需求，所以应运…
阅读更多...
AndroidStudio创建jinLibs文件夹

AndroidStudio创建jinLibs文件夹

在文件中的buildTypes节点下添加 sourceSets.main { jniLibs.srcDir libs } 如图 转载于:https://www.cnblogs.com/kim-liu/p/7479360.html
阅读更多...
内嵌Tomcat的Connector对象的静态代码块

内嵌Tomcat的Connector对象的静态代码块

在排查问题的过程中发现Connector对象有一个静态代码块&#xff1a; static {replacements.put("acceptCount", "backlog");replacements.put("connectionLinger", "soLinger");replacements.put("connectionTimeout", &quo…
阅读更多...
YAFFS2文件系统在嵌入式LINUX系统中的应用

YAFFS2文件系统在嵌入式LINUX系统中的应用

YAFFS2文件系统在嵌入式LINUX系统中的应用 2011-03-31 19:59 181人阅读 评论(0) 收藏 举报 1&#xff0e;文件系统简述 随着32位CPU价格不断下跌&#xff0c;片上存储设备的容量相比越来越大&#xff0c;越来越多的嵌入式系统开始应用各种嵌入式操作系统。一般在嵌入式领域&am…
阅读更多...
【Python爬虫学习笔记1】网络协议及请求基础

【Python爬虫学习笔记1】网络协议及请求基础

http协议与https协议 HTTP协议(全称为HyperText Transfer Protocol&#xff0c;超文本传输协议)&#xff0c;是发布和接收HTML页面的方法&#xff0c;其服务端口号为80。 HTTPS协议为HTTP协议的加密版本&#xff0c;其在HTTP下加入了SSL层&#xff0c;服务端口号为443。 URL结构…
阅读更多...
快速上手SpyGlass——基本流程

快速上手SpyGlass——基本流程

SpyGlass&#xff0c;这是一个很强大的RTL验证级工具。它不仅仅能检查sdc的错误&#xff0c;还能做以下各种检查&#xff1a;Low Power, DFT&#xff0c;CDC&#xff08;Cross Domain Check&#xff09;。 一、基本概念 1、方法学相关 Rule: 是SpyGlass 进行RTL分析的最小单…
阅读更多...
NAND FLASH ECC

NAND FLASH ECC

NAND需要ECC以确保数据完整性。NAND闪存的每一个页面上都包括额外的存储空间&#xff0c;它就是64个字节的空闲区(每512字节的扇区有16字节)。该区能存储ECC代码及其它像磨损评级或逻辑到物理块映射之类的信息。ECC能在硬件或软件中执行&#xff0c;但是&#xff0c;硬件执行有…
阅读更多...
快速上手SpyGlass——CDC检查

快速上手SpyGlass——CDC检查

随着技术的发展&#xff0c;数字电路的集成度越来越高&#xff0c;设计也越来越复杂。很少有系统会只工作在同一个时钟频率。一个系统中往往会存在多个时钟&#xff0c;这些时钟之间有可能是同步的&#xff0c;也有可能是异步的。如果一个系统中&#xff0c;异步时钟之间存在信…
阅读更多...
laravel session redis 设置

laravel session redis 设置

Laravel 在使用 Redis 作为 Session 驱动之前&#xff0c; 需要通过 Composer 安装 predis/predis 扩展包 (~1.0)。 当然也可以用原生自带的&#xff0c;具体使用见 https://laravel-china.org/docs/laravel/5.6/redis/1402#phpredis　操作即可。 然后在database 配置文件中配置…
阅读更多...
数字后端——低功耗单元库

数字后端——低功耗单元库

在之前的文章中&#xff0c;介绍了低功耗设计物理实施的方案&#xff1a; 数字后端——低功耗设计物理实施_沧海一升的博客-CSDN博客_低功耗设计低功耗设计方案所涉及到的物理实施相关内容https://blog.csdn.net/qq_21842097/article/details/119918312 为了实现例如门…
阅读更多...
【CUDA开发】CUDA面内存拷贝用法总结

【CUDA开发】CUDA面内存拷贝用法总结

【CUDA开发】CUDA面内存拷贝用法总结 标签&#xff08;空格分隔&#xff09;&#xff1a; 【CUDA开发】 主要是在调试CUDA硬解码并用D3D9或者D3D11显示的时候遇到了一些代码&#xff0c;如下所示&#xff1a; CUdeviceptr g_pRgba 0; CUDA_MEMCPY2D memcpy2D { 0 }; memcp…
阅读更多...
PerfMon常用计数器

PerfMon常用计数器

摘要: 故事来源于《sql server2012 深入解析和性能分析》 1.重要的PerfMon CPU计数器 计数器查看内容发生问题的条件Processor%Processor TimeCPU为生产环境的请求提供服务消耗的时间占总CPU时间的百分比>80%Processor%Privilege Time　　CPU为内核模式请求提供服务消耗的时…
阅读更多...
NandFlash详述

NandFlash详述

1. 硬件特性&#xff1a; 【Flash的硬件实现机制】 Flash全名叫做Flash Memory&#xff0c;属于非易失性存储设备(Non-volatile Memory Device)&#xff0c;与此相对应的是易失性存储设备(Volatile Memory Device)。这类设备&#xff0c;除了Flash&#xff0c;还有其他比较常见…
阅读更多...
史上最全的MySQL高性能优化实战总结！

史上最全的MySQL高性能优化实战总结！

1.1 前言 MySQL对于很多Linux从业者而言&#xff0c;是一个非常棘手的问题&#xff0c;多数情况都是因为对数据库出现问题的情况和处理思路不清晰。在进行MySQL的优化之前必须要了解的就是MySQL的查询过程&#xff0c;很多的查询优化工作实际上就是遵循一些原则让MySQL的优化器…
阅读更多...
低功耗设计——基于UPF进行设计

低功耗设计——基于UPF进行设计

UPF&#xff0c; 统一电源格式UPF(Unified Power Format)是新思(Synopsys)公司通用的电源格式&#xff0c;是一组标准的类Tcl 语言的集合&#xff0c;用来描述芯片设计中的低功耗意图&#xff08;Low-Power Design Intent&#xff09;。 使用UPF 的语言&#xff0c;可以描述供电…
阅读更多...
用公众号获取 任意公众号文章列表 软件还是免费

用公众号获取 任意公众号文章列表 软件还是免费

用公众号获取 任意公众号文章列表 软件还是免费还不快点下载 下载 地址 https://pan.baidu.com/s/1jI44Wjs转载于:https://www.cnblogs.com/wx85437898/p/7488590.html
阅读更多...
CentOS7时间设置问题

CentOS7时间设置问题

本地安装一个VMWare player虚拟机客户端&#xff0c;并安装了Linux CentOS7 Basic Web Server系统&#xff0c;时区在安装时已经选择了Asia/Shanghai,但是安装完成后&#xff0c;时间和当前外部的时间不一致&#xff0c;如下图 图一 图二 图三 后经搜索发现&#xff0c;由于未开…
阅读更多...
关于Nand ECC 错误

关于Nand ECC 错误

Nand flash ECC数据错误怎么办&#xff1f; 我编译过kernel 当时选了ECC校验 启动以后报错 去掉了&#xff0c;就不报错了 所以我会先考虑是不是这个问题 一般来说&#xff0c;硬件ECC校验出错可能性比较小吧&#xff1f; 我啥也不懂 -----摘自网络经典文章&#xff1a;“LINU…
阅读更多...
低功耗设计——功耗估算

低功耗设计——功耗估算

根据在功耗分析的过程中是否有输入向量的提供&#xff0c;功耗估算方法可以分为仿真的方法&#xff08;Simulative&#xff09;和非仿真的方法&#xff08;Non-simulative&#xff09;&#xff1a; 仿真的方法是根据用户所提供的大量输入向量来对电路进行模拟&#xff0c;利用…
阅读更多...
uboot 与系统内核中 MTD分区的关系

uboot 与系统内核中 MTD分区的关系

分类&#xff1a; Nand 驱动 2011-11-06 23:48 705人阅读 评论(2) 收藏 举报 uboot 与系统内核中 MTD分区的关系&#xff1a; 分区只是内核的概念&#xff0c;就是说A&#xff5e;B地址放内核&#xff0c;C&#xff5e;D地址放文件系统&#xff0c;等等。 1&#xff1a;在内核…
阅读更多...
最新文章

Copyright @ 2022~2023