lodash

前言 在开发中，我们经常会将一些常用的代码块、功能块进行封装，为的是更好的复用。那么，被抽离出来独立完成功能，通过API或配置项和其他部分交互，便形成了插件。 下面这些是我在工作中积累的一些常用的前端开源插件，这里只是罗列出来，详细的用法各个插件官网或者Gayhub都有介绍。注意：往往一个解决方案会有多个插件，需要读者根据自己的实际业务需求进行甄别选用，欢迎留言交流和补充。 ^_^ 可以先加个收藏（Ctrl + D），以后遇到类似的场景就来看看具体的插件及其用法。 另外，不要重复造轮子，把精力放在业务逻辑上！ 函数库 Lodash（推荐）： github.com/lodash/loda… Underscore： underscorejs.org/ Ramda： github.com/ramda/ramda outils： github.com/proYang/out… 30-seconds-of-code： github.com/Chalarangel… 动画库 Animate.css CSS3 动画库，也是目前最通用的动画库。 daneden.github.io/animate.css… Anime.js： 一个强大的、轻量级的用来制作动画的javascript库 animejs.com/ Hover.css： CSS hover 悬停效果，可以应用于链接、按钮、图片等等。

webpack打包的体积越小，对于部署应用的网站来说，性能越好，加载速度越快。 1. 分析打包文件 1. 生成统计信息文件 首先需要通过webpack命令生成统计信息的文件。在package.json的脚本中添加命令 "scripts": { "stats": "webpack --config webpack.prod.js --profile --json > stats.json", //... } 上面的命令会在根目录下生成一个stats.json的打包统计信息文件。 2. 可视化分析 使用插件可视化分析插件：webpack-bundle-analyzer npm install --save-dev webpack-bundle-analyzer 配置插件的使用信息； const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.export = { //... plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'disabled', // 关闭默认启动的展示信息的http服务器 generateStatsFile: true // 打包的时候生成stats.json文件； }), }

什么是Nodejs? Nodejs 是一个基于Chrome V8引擎的Javascript运行时（运行环境） Nodejs 安装 Node.js提供了哪些内容？ Nodejs运行时，JavaScript代码运行时的环境。 提供了一些核心模块，应用程序编程接口（Application Program Interface,API） 官方API文档https://nodejs.org/dist/latest-v12.x/docs/api/ 国内API文档http://nodejs.cn/api/ 交互式解析器（Read Execute Print Loop,REPL），以及一些相关的命令 打开命令窗口，输入node并回车，即可进入交互式解析器 输入.help命令，获取帮助信息。 +输入.break或.clear（.break命令的别名）跳出当前代码块，例如，if(true){ .break 输入.save命令，可以将当前会话中的代码保存到一个文件中，例如，.save app.js 输入.load命名，可以一个文件中的代码加载到当前会话中执行，例如，.load app.js 输入.editor命名，进入编辑器模式，Ctrl + D编辑完成，Ctrl + C取消编辑 输入.exit命令，回车既可以退出交互式解析器 引入CommonJS模块化规范，同时支持ECMAScript模块化规范

Lodash 是 JavaScript 的一个工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数。首先要明白的是 Lodash 的所有函数都不会在原有的数据上进行操作，而是复制出一个新的数据，不会改变原有数据。 _. 是Lodash 中的顶层对象，所有的方法和属性都在 _. 中使用。 1. _.indexOf 通过给定的元素（b）获取到这个元素的下标 let ary = [ "a" , "b" , "c" , "a" , "b" , "c" ] ; _ . indexOf ( ary , "b" ) ; //通过给定的元素（b）获取到这个元素的下标 // => 1 2. _.filter 返回一个新的过滤后的数组。 let ary = [ 10 , 20 , 30 , 40 ] ; _ . filter ( ary , item => item >= 20 ) ; // => [20, 30, 40] 3. _.map 把数组中的每一个元素进行相同的操作，组成新数组返回 let ary = [ 10 , 20 , 30 , 40 ] ; _ . map ( ary , item => item / 10 ) ; // => [1, 2, 3, 4] 4. _.find() 返回集合中满足查找条件的第一个元素 let ary1 = [ 11 , 12 , 13 , 14

前言 在前文中，我说过本系列文章的受众是在现代前端体系下能够熟练编写业务代码的同学，因此本文在介绍 webpack 配置时，仅提及构建一个库所特有的配置，其余配置请参考 webpack 官方文档。 输出产物 构建一个库与构建一个一般应用最大的不同点在于 构建完成后输出的产物 。 一般应用构建完成后会输出： 一个 html 文件 一个 js 入口 chunk 、若干子 chunk 若干 css 文件 若干其它资源，如图片、字体文件等 虽然输出的资源非常多，但实际上所有的依赖、加载关系都已经从 html 文件开始一层一层定下来了，换句话说，这个 html 文件实际上就是整个应用的入口。 一个库构建完成后会输出： 一个 CommonJS 格式的 js 文件 一个未压缩的 UMD 格式的 js 文件 一个已压缩的 UMD 格式的 js 文件 可能包括若干的 css 文件 可能包括若干的其它资源文件 库的入口分别是上面罗列的 js 文件；你可能会奇怪，一个库怎么会有3个入口文件呢？莫急，且听我一一道来。 CommonJS CommonJS 是 Node.js 推行的一种模块化规范，主要语法包括 module.exports 、 require() 等；而我们在使用 webpack 引入 npm 包时，实际上是处于 Node.js 环境，由此可知，这个 CommonJS 格式的入口 js 文件