前端开发需要知道的工具合集：webpack、eslint、prettier,...前端开发需要知道的一些工具，这些工具可以帮助你在项目开发中事半功倍。1.nrm：npmregistrymanagerregistry：npm远程仓库地址。由于众所周知的原因，官方的npm仓库在中国非常慢，所以我们需要使用一些替代方案。一种解决方案是将npmregistry切换为国内镜像仓库。所以，一般我们会这样做：#切换到淘宝npm仓库npmconfigsetregistryhttps://registry.npm.taobao.org/但是这样会比较麻烦，因为切换的时候要记住registry的url地址.所以需要nrm来管理npmregistry。安装npminstall-gnrm内置注册表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/npmMirrorhttps://skimdb.npmjs.com/registry/edunpm-http://registry.enpmjs.org/use#转淘宝registrynrmusetaobao#转npm官方registrynrmusenpm#添加自己的registrynrmaddyourNameyourRegistry2.cnpm：使用国内镜像仓库的npm客户端相当于克隆了一个npm的版本，除了publish，其命令与npm命令一致。内部默认使用国内的npm代码仓库https://cnpmjs.org/，当然你也可以改成自己的。如果你不喜欢使用nrm来切换npm注册表，你可以将npm和cnpm一起使用。此外，它一般与cnpmjs.org配合使用。安装npminstall-gcnpm3。yarn:类似npm的依赖管理工具类似npm的依赖管理工具，但是yarn会缓存每个下载的包，所以再次使用的时候不需要重新下载，利用并行下载来最大化资源利用率，所以安装速度更快。并且在开发react-native应用时，强烈推荐使用yarn，因为如果一定要使用npm，则必须使用npm<5版本。安装npminstall-gyarn4。webpack：前端打包工具现在前端打包基本都是用webpack。它不仅可以打包源代码文件（如js、css、html、ts...），还可以打包静态资源文件（如图片、字体...），还可以打包加载SPA应用一经请求。总之，webpack是前端打包的最佳选择。安装#全局npminstall-gwebpack#本地npminstall--save-devwebpack5。babel:es6->es5Transcoder有babel，你可以编写最新版本的JavaScript语法（es6,es7,es2015,...），然后babel将你的源代码转码成你需要的JavaScript语法，比如es5运行在浏览器端。Babel一般与webpack、rollup、parcel等打包构建工具一起使用。有关详细信息，请参阅babel-setup。安装#全局npminstall-gbabel-cli#本地npminstall--save-devbabel-cli6.eslint：js语法（包括jsx语法）检查和修正这个工具可以检查js语法（包括jsx语法），然后最大限度地修正不合规的代码。对提高个人代码质量，保证团队的代码规范和代码风格非常有用。eslint一般和husky、lint-staged一起使用。详细使用方法请参考如何提高代码质量。安装#全局npminstall-geslint#本地npminstall--save-deveslint7。stylelint：css语法（包括less、scss语法）检查和修正这个工具可以检查css语法（包括less、scss语法），然后最大限度地修正不兼容的代码。对提高个人代码质量，保证团队的代码规范和代码风格非常有用。stylelint通常与husky和??lint-staged一起使用。详细使用方法请参考如何提高代码质量。安装#全局npminstall-gstylelint#本地npminstall--save-devstylelint8。prettier:代码格式优化这个工具可以优化js,jsx,ts,css,less,scss,json,md,...，对于保证团队编码风格非常有用。prettier一般与husky和??lint-staged一起使用。详细使用方法请参考如何提高代码质量。安装#全局npminstall-gprettier#本地npminstall--save-devprettier9。gulp：基于流的自动化构建工具在webpack出现之前，很多前端构建任务都是通过gulp来完成的。webpack出现后，gulp在打包和构建功能上退居二线，但webpack只负责代码打包，其他很多工作还是由gulp完成，比如将打包后的文件上传到服务器，让打包后的文件执行更多流操作等。所以，很多时候gulp是和webpack结合使用的。安装#全局npminstall-ggulp#本地npminstall--save-devgulp10。jest：js测试库在Facebook内部，所有JavaScript代码包括react应用程序都使用jest进行测试。它的想法之一是提供完全集成的“零配置”测试体验。所以，用jest来测试JavaScript是一件很开心的事情。安装npminstall--save-devjest11。enzyme：react组件测试库jest只用于测试JavaScript，react组件的测试需要airbnb出品的enzyme。一般enzyme会和jest一起使用。安装npminstall--save-devenzymeenzyme-adapter-react-1612。react-devtools:chromedevelopertoolpluginforreact这是一款专门为react组件开发的chrome开发工具插件，就像开发者工具的Elements一样，可以查看整个页面的react组件树以及各个组件的属性和状态，您可以动态更改属性和状态，然后将UI更新到应用程序。通过chrome应用商店安装chrome-react-developer-tools。其他安装方式见react-devtools。13.redux-devtoolsandredux-devtools-extension:chromedevelopertoolpluginforredux这是一个专门为redux开发的chrome开发工具插件，和react-devtools一样，可以查看整个页面的reduxstore和它的变化，并可以动态调度动作，然后更新应用程序的用户界面。13.1安装redux-devtools这种安装方式会将redux-devtools嵌入到页面中，成为页面的一部分。npminstall--save-devredux-devtools#也可以安装npminstall--save-devredux-devtools-log-monitornpminstall--save-devredux-devtools-dock-monitor更多信息参考redux-devtools-Walkthrough.13.2安装redux-devtools-extension这种安装方式是浏览器开发者工具的插件。通过chrome应用商店安装chrome-redux-devtools。其他安装方式见redux-devtools-extension.14。vue-devtools:chromedevelopertoolpluginforvue这是一个专门为vue组件开发的chrome开发工具插件，就像开发者工具的Elements一样，可以查看整个页面的vue组件树和各个组件的数据，您可以动态更改数据，然后将UI更新到应用程序。安装通过chrome应用商店-vuejs-devtools安装chrome。其他安装方式见vue-devtools.15。以后更多博客请见https://github.com/senntyou/blogs作者：沈玉之(@senntyou)版权声明：自由转载-非商业-非衍生-保留署名（CreativeCommons3.0许可）
