示例

"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-node": "^1.2.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"copy-webpack-plugin": "^4.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jest": "^22.0.4",
"jest-serializer-vue": "^0.3.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"

轮子介绍

babel 集合

babel-core
babel-polyfill
babel-helper-vue-jsx-merge-props
babel-loader
babel-plugin-import
babel-plugin-transform-remove-strict-mode
babel-plugin-dynamic-import-node
babel-plugin-syntax-jsx
babel-plugin-transform-es2015-modules-commonjs
babel-plugin-transform-runtime
babel-plugin-transform-vue-jsx
babel-preset-env
babel-preset-stage-0
babel-register

webpack 集合

webpack
webpack-bundle-analyzer
webpack-dev-server
webpack-merge ：用于合并 webpack 配置，一般会把 webpack 的base配置和dev配置和prod配置分开写，这个工具方便的合并base和dev配置
clean-webpack-plugin
copy-webpack-plugin
uglifyjs-webpack-plugin
optimize-css-assets-webpack
extract-text-webpack-plugin
friendly-errors-webpack-plugin ：一个用于处理打包这个进程的插件，可以清除打包时候残留的控制台信息，并且可以在控制台打印出打包成功之后的文字提示，当然，对于打包错误之后的回调也是有的
html-webpack-plugin
eslint-loader
style-loader
css-loader
file-loader
url-loader

ESlint 集合

eslint
babel-eslint
eslint-config-standard
eslint-config-google
eslint-config-airbnb
eslint-friendly-formatter
eslint-plugin-import
eslint-plugin-node
eslint-plugin-promise
eslint-plugin-standard
eslint-plugin-vue
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y

测试框架 Jest、selenium 集合

jest
babel-jest
jest-serializer-vue ：自定义的序列化工具改进 jest 被保存的快照介绍示例
vue-jest
selenium-server ：自动化测试框架selenium的 Node 容器
chromedriver ：是 google 为网站开发人员提供的自动化测试接口，它是 selenium2 和 chrome 浏览器 进行通信的桥梁，详细介绍
nightwatch ：端到端的测试工具，内置断言库，基于 Selenium，非官方简介

Postcss、less、scss、stylus 集合

postcss-import ：postcss 是后处理器框架，整体介绍
postcss-url
postcss-loader
autoprefixer ：后处理器 postcss 框架其中一个插件，适用场景是：添加前缀、转换单位、低版本浏览器的 hack 等。详细介绍详细教程
less
less-loader
node-sass
sass-loader
stylus-loader

vue 必备

vue-loader
vue-style-loader
vue-template-compiler ：webpack 生态下使用**vue-loader*进行 vue 解析，*vue-loader*自带*vue-template-compiler**，会预编译您的 template 模版，生成 javascript 可执行函数。源码详解
vue
vue-router
vuex
axios

vue 环境下的简单组件库

iview && iview-loader
vue-nav-tabs

React 必备

formik React 表单救星

工具组件库

mavon-editor
highlight.js
mockjs
clipboard
echarts
Lodash
qs
fs
fs-extra ：实现了一些 fs 模块不包含的文件操（比如递归复制、删除等等）的模块
url-search-params-polyfill
md5 ：用 MD5 哈希加密 string
gulp ：一个自动化构建工具，一般配合 webpack 实现 webpack 未提供的图片压缩、项目上线部署等功能
vinyl-ftp ：配合 gulp 实现自动 ftp 部署项目文件到服务器

杂项

chalk ：实现 terminal 控制台彩色文字输出的模块
cross-spawn ：使用 npm 命令的跨平台解决方案
node-notifier ：基于 NodeJs 发送跨平台原生系统通知，Electron 已内置，可以测试时用于提醒
ora ：优雅好玩的 terminal 控制台 spinner 加载图标模块
portfinder ：自动获取端口，一般用于 webpack.dev.config.js 内
rimraf ：以包的形式包装rm -rf命令，就是用来删除文件和文件夹的，不管文件夹是否为空，都可以删除，简介
shelljs ：Node.js 下的脚本语言解析器，模块重新包装了child_process，实现在 javascript 中编写 shell 命令实现功能，介绍、介绍 2
commander ：封装了命令行参数的接口，让 commander 能够根据用户输入参数选择执行不同代码。。一般用于脚手架开发例子用 commander 做一个自己的 eslint 脚手架
validate-npm-package-name ：对于用户输入的工程名的可用性进行验证的模块，例子
semver ：是语义化版本（Semantic Versioning）规范的一个实现，实现了版本和版本范围的解析、计算、比较。介绍