autoprefixer
处理CSS前缀问题的神器,可以同Sass,Stylus或LESS等预处理器共通使用。它适用于普通的CSS,无需关心要为哪些浏览器加前缀,只需全新关注于实现,并使用W3C最新的规范。
babel-core
如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。
babel-eslint
用于静态检查代码的语法和风格
babel-jest
让单元测试代码支持Es6
babel-loader
ES6转为ES5
babel-plugin-import
用于babel的模块导入插件,兼容antd, antd-mobile,等等。
babel-polyfill
Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,例如: Promise、Set、Map 等新增对象,Object.assign、Object.entries等静态方法都不会转码。
举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
babel-polyfill 的做法是将全局对象通通污染一遍,比如想在 node 0.10 上用 Promise,调用 babel-polyfill 就会往 global 对象挂上 Promise 对象。对于普通的业务代码没有关系,但如果用在模块上就有问题了,会把模块使用者的环境污染掉。
babel-runtime
babel-runtime也是转换新的API,作用同babel-polyfill,实现和用法皆不同.
babel-runtime的做法是自己手动引入 helper 函数,还是上面的例子,const Promise = require('babel-runtime/core-js/promise') 就可以引入 Promise。
但 babel-runtime 也有问题,第一,很不方便,第二,在代码中中直接引入 helper 函数,意味着不能共享,造成最终打包出来的文件里有很多重复的 helper 代码。所以,babel 又开发了 babel-plugin-transform-runtime,这个模块会将我们的代码重写,如将 Promise 重写成 _Promise(只是打比方),然后引入_Promise helper 函数。这样就避免了重复打包代码和手动引入模块的痛苦。
babel-polyfill,babel-runtime对比详情
babel-preset-react-app
这个包包含了创建React-App的babel预设
bowser
一个浏览器探测器
case-sensitive-paths-webpack-plugin
这个Webpack插件强制所有需要的模块的整个路径匹配磁盘上实际路径的具体情况。使用这个插件可以帮助减轻开发人员在OSX上工作的情况,因为OSX不遵循严格的路径敏感性,这会导致与其他开发人员的冲突,或者构建运行其他操作系统的盒子,这些系统需要正确的路径。
chalk
修改控制台中字符串样式,包括
1.字体样式(加粗、隐藏等)
2.字体颜色
3.背景颜色
dotenv
通过项目根目录的.env文件来维护环境变量详情
fs-extra
添加了不包含在本机fs模块中的文件系统方法,并为fs方法添加了承诺支持。它还使用优雅-fs来防止EMFILE错误。这应该是对fs的替代。
husky,lint-staged
husky和lint-staged构建代码检查工作流
lint是对代码做静态分析,并试图找出潜在问题的工具.操作详情
js-cookie
方便操作cookie
nzh
适用于需要转换阿拉伯数字与中文数字的场景
postcss-loader
postcss提供了一种方式用js代码来处理css,他负责把css代码解析成抽象语法树结构,再交于插件来处理.配置及常用插件
prettier
使用ESlint和prettier写出高质量代码.
ESLint可以检测代码中潜在问题,Prettier作为代码格式化工具,能够统一团队的代码风格
prop-types
类型检查,详情见React官文
query-string
用于处理query字符串
react-fileupload
异步文件上传.详见
sortablejs
拖放排序
sw-precache-webpack-plugin
SWPrecacheWebpackPlugin是一个webpack插件,用于使用服务人员来缓存您的外部项目依赖项。
它将使用sw-precache生成一个服务工作者文件,并将其添加到构建目录中。
网友评论