grunt
| 包名 | 作用 |
|---|---|
| grunt | 对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等 |
| grunt-cli | grunt命令行工具 |
| grunt-init | grunt项目初始化工具 |
| time-grunt | grunt计时工具 |
| load-grunt-tasks | grunt自动导入插件工具 |
| load-grunt-configs | 从单独的文件加载 grunt 任务配置 |
| grunt-contrib-clean | grunt清除废料工具 |
| grunt-contrib-copy | grunt复制文件工具 |
| grunt-contrib-requirejs | reuirejs任务执行工具 |
| grunt-contrib-watch | 实时监控文件变化、调用相应的任务重新执行 |
| grunt-contrib-jshint | javascript语法错误检查 |
| grunt-contrib-nodeunit | 运行 Nodeunit 单元测试 |
| grunt-contrib-concat | 合并多个文件的代码到一个文件中 |
| grunt-contrib-uglify | 使用 UglifyJS 缩小 JavaScript 文件 |
| grunt-contrib-cssmin | 压缩/合并css文件 |
| grunt-contrib-htmlmin | 压缩html文件 |
| grunt-contrib-imagemin | 压缩图片文件(无损) |
| grunt-contrib-connect | 启动连接网络服务器 |
| grunt-contrib-compass | 将 Compass 编译为 CSS |
| grunt-contrib-sass | 将 sass 编译为 CSS |
| grunt-contrib-less | 将 less 编译为 CSS |
| grunt-wiredep | 使用 Grunt 将 Bower 包注入到您的源代码中 |
| grunt-concurrent | 并发运行 grunt 任务 |
| grunt-autoprefixer | 解析 CSS 并使用 Can I Use 数据库添加供应商前缀的 CSS 属性 |
| grunt-newer | 将 Grunt 任务配置为仅使用较新的文件运行 |
| grunt-webpack | Use Webpack with Grunt |
| grunt-postcss | 使用 PostCSS 将多个后处理器应用到您的 CSS |
| grunt-ejs-render | 使用自定义数据和帮助程序渲染 EJS 模板的 Grunt 插件 |
| grunt-premailer | Premailer 的 Grunt 包装器任务 |
| grunt-preprocess | 围绕预处理 npm 模块的 Grunt 任务 |
| grunt-bootlint | Bootlint 的 Grunt 包装器，Bootstrap 项目的 HTML linter |
gulp
| 包名 | 作用 |
|---|---|
| gulp | 自动化和增强您的工作流程的工具包 |
| gulp-cli | gulp命令行工具 |
| gulp-concat | 文件合并 |
| gulp-load-plugins | 从包依赖项加载 gulp 插件并将它们附加到您选择的对象 |
| gulp-replace | gulp 的字符串替换插件 |
| gulp-shell | 方便的 gulp 命令行界面 |
| gulp-if | 条件判断插件 |
| gulp-babel | 文件语法编译 |
| gulp-uglify | 代码压缩 |
| gulp-rename | 文件重命名 |
| gulp-beautify | This is a gulp plugin for js-beautify |
| gulp-cache-bust | gulp 的 cachebust 插件 |
| gulp-minify | 使用 terser 缩小 JavaScript |
| gulp-useref | 将HTML引用的多个CSS和JS合并起来，减小依赖的文件个数，从而减少浏览器发起的请求次数 |
browserfiy
| 包名 | 作用 |
|---|---|
| browserfiy | 浏览器端的前端打包工具 |
rollup
| 包名 | 作用 |
|---|---|
| rollup | 新一代的 JavaScript 模块打包工具 |
| 将 .json 文件转换为 ES6 模块 | |
| @rollup/plugin-json | 将 .json 文件转换为 ES6 模块 |
| 在 node_modules 中定位并捆绑第三方依赖 | |
| @rollup/plugin-node-resolve | 在 node_modules 中定位并捆绑第三方依赖 |
| 将 CommonJS 模块转换为 ES2015 | |
| @rollup/plugin-commonjs | 将 CommonJS 模块转换为 ES2015 |
| rollup-plugin-babel | Rollup 和 Babel 之间的无缝集成 |
| @rollup/plugin-babel | Rollup 和 Babel 之间的无缝集成 |
| rollup-plugin-replace | 捆绑时替换文件中的字符串 |
| @rollup/plugin-replace | 捆绑时替换文件中的字符串 |
| @rollup/plugin-typescript | 用于在 Rollup 和 Typescript 之间无缝集成 |
| rollup-plugin-postcss | Rollup 和 PostCSS 之间的无缝集成 |
| rollup-plugin-vue | 使用 Rollup 滚动 Vue 3 SFC |
| rollup-plugin-uglify | 用于缩小生成包的 Rollup 插件 |
| rollup-plugin-terser | 压缩生成文件 |
| rollup-plugin-terser | 用于缩小生成的 es 包的汇总插件 |
| rollup-plugin-eslint | 使用 ESLint 验证入口点和所有导入的文件 |
webpack
| 包名 | 作用 |
|---|---|
| webpack | 最流行的模块打包器 |
| webpack-cli | webpack命令行工具 |
| schema-utils | loader和plugin中验证选项的工具包 |
| webpack-sources | 包含代表一个源的多个类。可以向 Source 询问源代码、大小、源映射和哈希 |
| loader-utils | 自定义loader工具包 |
| webpack-dev-server | webpack热更新服务器 |
| webpack-merge | 合并webpack配置文件 |
| webpack-chain | 用于生成和简化Webpack配置的修改 |
| react-hot-loader | 允许即时实时刷新而在编辑React组件时不会丢失状态 |
| vue-loader | 允许你以一种名为单文件组件的格式撰写 Vue 组件 |
| @svgr/webpack | 将SVG转换为React组件 |
| svg-sprite-loader | 将加载的 svg 图片拼接成 雪碧图，放到页面中，其它地方通过 复用 |
| expose-loader | expose-loader向全局对象添加模块，这对于调试或支持依赖于全局变量中的库的库很有用 |
| exports-loader | 添加 module.exports 来主动暴露需要的对象，使其模块化 |
| script-loader | 全局上下文环境中执行模块 JS 文件 |
| raw-loader | 用于 webpack 的加载器，可让您将文件作为字符串导入 |
| url-loader | 将文件资源编译成base64形式 |
| file-loader | 对引入的文件进行移动到构建目录中 |
| babel-loader | 使用babel编译文件 |
| eslint-loader | 语法检查加载器 |
| html-loader | 将文件输出成为html |
| markdown-loader | 使用markmark的webpack的markdown-loader |
| isomorphic-style-loader | 针对同构应用做优化的style加载器 |
| style-loader | 注入css到dom中 |
| css-loader | 读取css文件编译成对象 |
| postcss-loader | 后置处理css插件 |
| sass-loader | 编译sass文件成为css |
| less-loader | 编译less文件成为css |
| thread-loader | 多进程编译模块 |
| ts-loader | 编译typescript文件 |
| webpackbar | 用于Webpack 3、4和5的优雅ProgressBar和Profiler |
| webpack-node-externals | 轻松排除Webpack中的node_modules模块 |
| webpack-bundle-analyzer | 分析chunk的依赖关系 |
| windicss-webpack-plugin | Windi CSS 看作是按需供应的 Tailwind 替代方案 |
| friendly-errors-webpack-plugin | 识别某些类别的webpack错误，并清除，汇总并确定优先级，以提供更好的开发人员体验 |
| speed-measure-webpack-plugin | 打包速度分析器 |
| antd-dayjs-webpack-plugin | antd项目中将moment替换成day.js |
| uglifyjs-webpack-plugin | 压缩js代码插件 |
| clean-webpack-plugin | 用于清理构建目录插件，保持构建内容为最新资源 |
| copy-webpack-plugin | 复制文件或者目录的插件 |
| html-webpack-plugin | 将打包的资源动态更新给html |
| add-asset-html-cdn-webpack-plugin | 添加资源的CDN引入方式 |
| html-webpack-inline-source-plugin | 通过添加 {inlineSource: 'regex string'} 选项增强 html-webpack-plugin 功能 |
| script-ext-html-webpack-plugin | 将指定文件内容内嵌到script中 |
| favicons-webpack-plugin | 让 webpack 为你生成所有的 favicon 和图标 |
| mini-css-extract-plugin | 抽离css文件 |
| optimize-css-assets-webpack-plugin | 用于优化最小化CSS资源 |
| terser-webpack-plugin | 使用 terser 来缩小/最小化你的 JavaScript |
| preload-webpack-plugin | 使用 link rel='preload' 自动连接异步（和其他类型）的 JavaScript 块。这有助于延迟加载 |
| prerender-spa-plugin | SPA页面预渲染工具，实现SEO（搜索引擎优化） |
| common-config-webpack-plugin | webpack配置集成插件 |
| sw-precache-webpack-plugin | 将你的项目升级成PWA，create-react-app默认使用的策略 |
| workbox-webpack-plugin | 使用workbox的webpack插件，让你的网站支持PWA |
| pnp-webpack-plugin | yarn启用PNP特性后，让webpack的resolve模块无需特殊改写即可正常使用 |
| extract-text-webpack-plugin | 从一个或多个包中提取文本到一个单独的文件中 |
parcel
| 包名 | 作用 |
|---|---|
| parcel | 快速、零配置的 Web 应用程序打包器 |
| @parcel/config-default | parcel预置配置文件 |
| @parcel/transformer-raw | 原始文件转换 |
| @parcel/transformer-typescript-tsc | typescript文件转换 |
esbuild
| 包名 | 作用 |
|---|---|
| esbuild | 极速 JavaScript 打包器 |
snowpack
| 包名 | 作用 |
|---|---|
| snowpack | 更快的前端构建工具 |
vite
| 包名 | 作用 |
|---|---|
| vite | 下一代前端打包工具 |
| create-vite | 创建下一代前端工具，它很快 |
