1.1. 在线编辑器

1.1.1. HTML / CSS / js 可视化指南

1.2. js库

  • jquery

  • zepto.js

  • immutable.js facebook提供的库,实现js数据不可变,解决引用带来的副作用

  • immer mobox作者写的immutable库

  • fullPage.js 全屏滚动jq库

  • swiper 轮播图

  • underscore 函数库

  • lodash underscore的超集

  • ramda 函数式编程库,函数本身自动柯里化

  • moment 日期和时间操作库

  • lazy 懒执行的函数式js库

  • 图表库

    • echarts
    • chart.js
    • chart.xkcd
    • chartlist

    • bizCharts 阿里开源的基于react技术栈,并基于G2进行封装的图表库

    • G2

  • mockjs

    数据模拟框架

  • Particles.js 在web中创建炫酷的浮动粒子

  • 动画库

    • three.js 3d webgl动画库
    • ant-motion
    • Anime.js
    • wow.js 滚动动画

  • Highlight.js  语法高亮

  • Q.js 异步编程库

  • Service Worker 离线缓存

  • redux

  • react-redux
  • redux-thunk
  • redux-saga
  • react-lodable
  • lodable-components

  • React.lazy + React.Suspense,不支持服务端渲染 Suspense作用,搭配lazy,在代码未下载好之前渲染fallback传入的值

  • erdua 移动端调试工具

  • react-immutable-render-mixin,react-addons-pure-render-mixin 复杂数据新旧对比,处理重复render的库

react-addons-pure-render-mixin： 只能对props和state数据作浅比较，若props和state数据为深层嵌套时，则可能会发生误判，需结合immutable一块使用

react-immutable-render-mixin： 为react-addons-pure-render-mixin和immtable的is函数结合的库，达到的效果相当于shouldComponentUpdate中使用了Immutable的is函数

  • css in js方案
    • 命名空间 适用ui组件库
    • react CSS
    • styled-components
    • CSS Modules 使用webpack构建工具配置css-loader的options的modules选项为true

  • memoize-one 生成具有缓存能力的函数,当需要给class组件传递引用类型数据时,可借助memoizeOne包裹返回对象,只要依赖项不变,子组件就不会重新渲染.对于函数式组件,可借用React.memo/useMemo/useCallback

  • classnames react中使用该库可以传递对象,数组,变量等

  • TensorFlow 机器学习框架

  • unfetch

  • swr stale-while-revalidate 的简称，最主要的能力是：我们在发起网络请求时，会优先返回之前缓存的数据，然后在背后发起新的网络请求，最终用新的请求结果重新触发组件渲染

  • react-use, umi hooks, react-query react hooks库

  • 装饰器库 core-decorators.js

1.3. 组件库 && 前端框架

  • dva
  • umi
  • ant design
  • ant design pro

  • bit.dev

  • hexo -next主题

  • gatsby react静态站点生成器

  • vuepress vue静态站点生成器

  • async-validator 数据校验库，antd表单校验依赖库

服务端渲染框架

  • next.js
  • nuxt.js

1.4. CSS库

  • animate.css c3动画库

  • materialize-css

  • hover

  • bootstrap 响应式UI框架

  • react-csstrantion-group,CSSTransition,CSSTrantitionGroup react 官方动画库react-transition-group

1.5. 代码风格/规范

  • stardardjs

  • airbnb

1.6. 代码检查工具

  • eslint,tslint,jshint 主要解决代码质量问题,代码风格问题没有完完全全做完

  • prettier 代码格式化工具,用于保持风格统一

方式1 ：根目录创建.prettierrc

方式2: package.json中新建prettier属性。

使用eslint-plugin-prettier插件来添加prettier作为ESLint的规则配置，在ESLint运行Prettier

  • git相关插件 pre-commit commit-msg Commitizen 命令行交互式地撰写合格 Commit message 的工具 conventional-changelog 生成change log

  • husky 实现各种git hook,如pre-commit

  • lint-staged 对git暂存区中的文件执行代码检测

1.7. node.js库

  • chalk 终端输出样式

  • log4js，winston，bunyan node日志库

  • figlet 命令行输出logo

  • http-proxy-middleware api转发,node中间层代理

  • request node请求模块

  • morgan express默认的日志中间件

  • log-symbols 图标提示

  • ora 异步操作loading动画

  • inquirer 根据输入个性化项目

  • commander nodejs命令行界面的解决方案,很方便的解析命令行参数,写脚手架

    program
.version('0.1.0')
.option('n, new', 'add directory')
.option('-p, --pineapple', 'Add pineapple')
.parse(process.argv);

  • puppeteer node爬虫框架

  • cheerio html解析,方便在服务端或其他地方操作DOM,像jquery一样操作字符串,不能处理SPA应用

  • superagent 配置cheerio实现爬虫

  • Sequelize

    一款基于Nodejs功能强大的异步ORM框架(对SQL查询语句的封装，让我们可以用OOP的方式操作数据库，优雅的生成安全、可维护的SQL代码)

  • globby

    增强版的glob

  • multer formidable 处理文件上传

1.8. node.js框架

  • express
  • koa
  • nest
  • egg

1.9. node模板引擎

  • art-template

  • ejs

  • pug(原jade)

  • swig

1.10. node.js工具

  • npm 可用 --registry指定镜像源 查看库 npm view xxx version/versions

  • cnpm

  • nvm node版本管理,不支持windows,mac上通过brew下载安装

    $ nvm ls-remote 查看 所有的node可用版本

    $ nvm install xxx 下载你想要的版本 如nvm install v10.13.0

    $ nvm use xxx 使用指定版本的node

    $ nvm current 当前node版本

    $ nvm ls 列举所有已安装的node版本

    $ nvm alias default xxx 每次启动终端都使用该版本的node

  • nrm npm镜像源管理工具 nrm use npm nrm use taobao

  • npx npm v5.2.0引入的命令,执行依赖包里的二进制文件

  • nodemon,supervisior,node-dev 自动重启node服务

  • httpserver,http-server 开启临时node服务器

  • localtunnel 本机服务暴露到外网 lt -p 9000 -h http://localtunnel.me --local-https false

  • cross-env

package.json中通过该脚本指定NODE_ENV 如"dev":"cross-env NODE_ENV=dev nodemon ./bin/www.js"

本身直接通过NODE_ENV=dev在mac上能达到效果,cross-env迷你包使得可以跨平台设置和使用 环境变量,以unix方式设置环境变量,同时在windows上也能兼容运行

  • pm2,forever 不局限于node的进程管理工具,常用于线上

  • 鉴权方案

    http basic authentication session-cookie OAuth

    • JWT---相关库 bcrypt - 密码加密以及解密匹配 jsonwebtoken - 生成token passport,passport-jwt - 解析token jwt-decode - 前端解析token

1.11. 命令行

2. !/usr/bin/env node

env是mac或者linux系统的环境变量,可执行命令.表示使用当前env环境内配置的Ppath路径下的node版本.脚本在执行shell时,会自动从env内调用合适的解释器执行

2.1. 构建工具 && 打包器

  • webpack

  • react-app-rewired 对react官方脚手架进行自定义配置的解决方案,2.x需配合customize-cra使用

  • gulp

  • grunt

  • rollup

  • lerna JavaScript 多 package 项目管理工具

  • Yeoman

  • Bower
  • react-hot-loader react项目局部热更新,依赖于webpack 的 HotModuleReplacement 热加载插件。与react-loadable不兼容,热加载时可保留状态

polyfill

  • babel-polyfill 通过向全局对象,内置对象原型添加方法
  • babel-runtime 按需加载
  • babel-plugin-transform-runtime

2.2. 测试框架

  • jest
  • ava
  • mocha

2.3. 微服务

  • vmware
  • virtual box
  • vagrant
  • docker
  • kubernetes
  • CI/CD(持续集成/持续部署) Git webhooks Jenkins Hudson Travis CI Circle CI

2.4. 模块化规范

  • commonjs node.js的同步加载的模块化规范

  • AMD 异步模块,以浏览器第一的原则发展,RequireJS遵循该规范

  • CMD 同步模块,SeaJS遵循该规范

  • UMD 通用模块规范,先判断是否支持node.js模块,再判断是否支持AMD

  • es module es6前端模块化规范

2.5. 数据库

  • mysql

  • mongodb

  • redis 数据存在内存中,并在磁盘中记录变化,数据操作非常快

2.6. web to native

weex react-native flutter

2.7. 前端前景

  • graphQL

  • serverless

  • webAssembly

  • pwa Progressive Web App,类似app的小应用,在浏览器地址栏后面点击安装就可以安装到桌面

2.8. 前端外文期刊

  • JavaScript Weekly
  • CSS Weekly
  • 奇舞周刊
  • FrontEnd Focus
  • Node Weekly
  • Full Web Weekly
  • Web Design Weekly
  • mobile web weekly

2.9. to be learned

itchat wxpy wechaty

Jason Huang all right reserved，powered by Gitbook该文件最后修改时间： 2020-10-28 13:36:46

results matching ""

    No results matching ""