🎉 整理下我平时关注的前端库。
- webpack - 打包项目。
- rollup - 打包 npm 库。
- parcel - webpack 竞品,但发展前景不乐观,再观察一段时间。
- systemjs - 针对一些特殊场景会比较有用,比如云 ide,支付宝小程序 IDE 等。
- microbundle - 基于 rollup,简化配置。
- webpack-dev-server
- webpack-dev-middleware
- vue-cli
- create-react-app
- webpack-merge - 合并 webpack 配置。
- webpack-chain - 通过 chain 风格 api 的方式修改 webpack 配置。
- hard-source-webpack-plugin - 性能提升 70%,但有坑。
- svgr - svg 转 react 组件。
- postcss - CSS 界的 babel。
- autoprefixer - 为 CSS 选择权自动加 prefix。
- cssnano - CSS 压缩,也有类 preset 的概念。
- mini-css-extract-plugin - 提取 CSS 为单独文件。
- webpackbar - webpack 进度条。
- webpack-bundle-analyzer - 构建产物占比分析。
- uglifyjs-webpack-plugin - JS 压缩,产物为 ES5 语法。
- terser-webpack-plugin - JS 压缩,产物为 ES6 语法。
- webpack-manifest-plugin - 生成 manifest.json。
- copy-webpack-plugin - 复制额外的文件到输出目录。
- case-sensitive-paths-webpack-plugin - 大小写敏感检测,能规避一些问题,但构建时性能消耗较大。
- css-hot-loader - CSS 热更新,搭配 mini-css-extract-plugin 使用。
- duplicate-package-checker-webpack-plugin - 重复依赖检测。
- babel
- babel-plugin-rawest - React 的 DOM 直出方案。
- babel-plugin-macros - 前端文件写 node 逻辑。
- babel-plugin-dynamic-import-node - 有些场景下会需要禁用
import()
语法。 - babel-plugin-react-require - 自动为 jsx 语法加 react 引用。
- babel-plugin-react-remove-prop-types - 删除 prop-types,生产环境用。
- jest
- ts-jest
- enzyme
- jsdom
- puppeteer
- react-test-rerender - 官方出品。
- react-testing-library - kentcdodds 出品。
- preact
- inferno
- react-router
- reach-router
- router5
- react-loadable
- ant-design
- material-ui
- react-intl
- react-dnd
- react-helmet
- react-redux - 绑定 react 和 redux,这个名字取得不好,react-redux 还是 redux-react 老是记不清楚。
- redux-saga
- redux-persist
- redux-bundler
- redux-box
- lerna - monorepo 管理。
- lerna-changelog - 为 lerna 项目自动生成 changelog。
- eslint - JS 风格约束。
- eslint-config-airbnb
- prettier - 更主观的风格自动修改。
- yeoman-generator - 脚手架工具。
- serve - 本地静态服务器。
- np - npm publish 辅助,自动 push、打 tag、升版本等。
- lint-staged - eslint 提速,只 lint 提交的代码。
- coveralls - 覆盖率。
- husky - 添加 git hooks。
- cross-env - 跨平台的环境变量声明。
- projj - 本地 git 项目管理,支持 github 和 gitlab。
- VSCode
- IntelliJ IDEA - 我用这个。
- codesandbox
- stackblitz
- yargs - 命令行入口套件。
- yargs-parser - 命令行参数解析。
- chalk - 输出不同颜色。
- cheerio - 用类 jQuery 语法处理 HTML。
- chokidar - 文件监听。
- clipboardy - 复制文本到粘贴板。
- debug - 打印调试信息。
- deprecate - 给过期警告。
- glob - 文件查找。
- signale - 漂亮的日志打印。
- semver - semver 版本处理。
- update-notifier - 更新提醒。
- rimraf - 删除文件。