前端开发中用到的npm工具

头像
飘梧
    阅读 8 分钟

    本文记录自己在实际开发过程中使用到的前端通用、Vue、React的npm工具，供大家参考和自己查阅。

    网络

    1.axios

    Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

    2.fetch

    fetch是基于Promise, 核心在于对 HTTP 接口的抽象，包括Request，Response，Headers，Body以及用于初始化异步请求的global fetch。
fetch属于原生js，它提供了许多与XMLHttpRequest相同的功能，等同于XMLHttpRequest，是XMLHttpRequest的一种替代方案。

    3.umi-request

    网络请求库，基于 fetch 封装, 兼具 fetch 与 axios 的特点, 旨在为开发者提供一个统一的api调用方式, 简化使用, 并提供诸如缓存, 超时, 字符编码处理, 错误处理等常用功能.
目前主要在用。

    • npm

      $ npm install umi-request --save

    4.reqwest

    基于Promises，支持xmlHttpRequest, JSONP, CORS, and CommonJS方式引入。

    • npm

      $ npm install reqwest --save
    特效

    1.animate.css

    纯css特效，通过给元素添加样式实现特效

    2.tween.js

    TweenJS是使用JavaScript中的一个简单的补间动画库。它的开发与EaselJS库很好的整合，但不依赖于或特定于它。 它支持数字对象的属性和CSS样式属性赋值。API很简单但很强大，因此很容易通过链接命令创建复杂的项目。

    • npm

      $ npm install tween.js --save
    • 参考文档
      http://www.createjs.cc/tweenj...
    • 扩展
      EaselJS：一个JavaScript库,使HTML5 Canvas标签变得更简单。用于创建游戏，生成艺术作品，和处理其他高级图形化等有着很友好的体验。
      SoundJS：SoundJS提供了简单而强大的API来处理音频。通过插件来执行实际的音频实现，简单直接的处理声音。
      PreloadJS：PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源。

    3.createjs

    CreateJS是基于HTML5开发的一套模块化的库和工具。基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。由4个库组成：easeljs：核心库，包括显示列表、事件机制；preloadjs：预加载；tweenjs：元件补间动画；soundjs：音频处理。
CreateJS是对核心库重新打包，用于npm安装。

    4.ant motion

    为React提供的一款界面动画特效，包含多种动画组件：单元素、css样式、进出场、文字、页面滚动、banner。

    • npm

      $ npm  install rc-tween-one --save
$ npm  install rc-animate --save
$ npm  install rc-queue-anim --save
$ npm  install rc-texty --save
$ npm  install rc-scroll-anim --save
$ npm  install rc-banner-anim --save
    • 参考文档
      https://motion.ant.design/com...

    9.d3.js

    D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。

    10.three.js

    openGL是一个跨平台3D/2D的绘图标准，WebGL则是openGL在浏览器上的一个实现。
web前端开发人员可以直接用WebGL接口进行编程，但WebGL只是非常基础的绘图API，需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务，而且代码量巨大。
Threejs对WebGL进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。
    存储

    1.store

    store用于本地存储，支持localstorage,session,cookies等，自动选择第一种可用的本地存储方式。
    图表

    1.echarts

    百度的图表，比较受欢迎的一款图表组件

    2.gg-editor

    基于 G6 和 React 的可视化图编辑器
    医学影像

    1.cornerstone-core

    cornerstone俗称基石，提供了一个完整的基于web医学成像核心js库。这个库包含Core.js组件，它是一个轻量级的JavaScript库，用于在支持HTML5 canvas元素的现代web浏览器中显示医学图像。

    2.dicom-parser

    dicomParser是一个轻量级库，支持HTML5的web浏览器（IE10+）、Node.js和Meteor中解析DICOM文件。
dicomParser速度快，使用方便，不需要外部依赖。

    3.hammerjs

    Hammer 是一个可以识别由触摸，鼠标，指针引发的手势的开源库。Hammer 没有任何的依赖项，并且很小，gzip 压缩下只有 3.96 kB 。
    CSS IN JS

    1.classnames

    一个简单的JavaScript库，用于将类名连接在一起，支持在浏览器、nodejs、webpack中使用。

    2.css modules

    解决css全局冲突问题，添加局部作用域和模块依赖，使用起来十分便捷。
一般使用脚手架搭建的项目可以直接使用css modules,比如react、vue等常见脚手架。
如果是自己搭建脚手架，则需要通过配置webpack的css配置来启用css modules。

    3.reactcss

    react 中用于支持内联style的面向对象方式写法。

    4.less

    Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在Node或浏览器端。
    通用

    1.moment

    JavaScript 日期处理类库

    2.lodash

    一个一致性、模块化、高性能的 JavaScript 实用工具库。

    3.faker

    用于生成随机数据

    4.qs

    用于URL上的参数转换

    5.timeago.js

    用于将时间转化为“几分钟前”等格式

    6.html2canvas

    用于浏览器屏幕截图

    7.mockjs

    生成随机数据，拦截 Ajax 请求

    8.touchslider

    TouchSlider是一个轻量级的javascript组件，设计的目的是提供一个可以方便实现全平台（PC及移动端触摸界面）的幻灯slider效果。

    9.pageswitch

    页面切换器，支持多达 121 种切页效果，更可支持自定义切页动画！
与 TouchSlider.js 的区别
pageSwitch.js 适用场景为全屏切换，即一切一屏，并且在此基础上实现了超过一百种切换效果。
而 TouchSlider.js 则侧重于在滑动效果下，不仅支持全屏切换，还支持不固定尺寸的幻灯切换。

    10.script-loader

    在全局上下文(global context)执行一次 JS 脚本。
警告: 在 node.js 中不会运行
    Vue

    1.view-design

    View UI，即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

    2.vue-awesome-swiper

    基于 Swiper4、适用于 Vue 的轮播组件，支持服务端渲染和单页应用。

    3.vue-carousel-3d

    vue的3d轮播组件

    4.vue-clamp

    vue的多行省略

    5.vue-cookies

    vue的cookies管理工具

    6.vue-happy-scroll

    一款基于vue2.0的滚动条插件，美化浏览器滚动条。

    7.vue-holderjs

    vue的图片占位工具

    8.vuedraggable

    vue的拖拽组件
    React

    1.antd

    蚂蚁的一套前端UI,一套企业级 UI 设计语言和 React 组件库。（本人主要在用antd for react）

    2.umi

    umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有 50+ 的插件。
umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 600+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

    3.dva

    dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

    4.react-cookies

    react的cookies管理工具

    • npm

      $ npm install react-cookies --save

    5.react-custom-scrollbars

    react的滚动条工具，美化浏览器滚动条

    6.nprogress

    文档加载进度条，用于页面顶部或者底部

    7.react-infinite-scroller

    react的滚动加载组件

    8.react-loading

    react的加载中小工具

    9.react-resizable

    可通过手柄、鼠标调整react组件大小

    10.react-router-breadcrumbs-hoc

    react 路由面包屑工具

    11.react-jsgantt

    react的甘特图组件

    13.react-tagcloud

    react的字符云

    14.react-color

    react的调色板

    15.prop-types

    react的运行时类型检查工具

    16.react-pdf

    react的pdf工具
    移动端

    1.vant

    有赞vue移动端组件

    2.sui

    SUI Mobile 是一套基于 Framework7 开发的UI库。早期使用，现已弃用。
    小程序

    1.colorui

    一套纯css的小程序UI
https://www.color-ui.com/

    2.echarts-for-weixin

    echarts支持微信小程序
    前端react工具npmvue.js
    飘梧
    97 声望4 粉丝

    宠辱不惊，闲看庭前花开花落。

    下一篇 »
    PHP-CI4系列-开篇

    引用和评论

    推荐阅读
    头像
    关于serverless

    飘梧阅读 995

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.8k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.5k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.4k

    0 条评论
    得票最新