为组内实现一个私有通用的组件库，解放重复劳动力，提高效率，让你的代码被更多小伙伴使用。 本文是笔者总结的一篇关于构建组件库的一些经验和思考，希望在项目中有所帮助。 正文开始......初始化一个基础项目 生成基础package.json npm init -y 安装项目指定需要的插件 npm i webpack webpack-cli html-webpack-plugin @babel...innerHTML = 'hello word'; 以上所有的这些基本都是为了支持ts环境，还有支持ts可配置webpack环境 现在我们试图将一些通用的工具函数贡献给其他小伙伴使用。.../isType'; 现在需要打包不同环境的lib,通用就是umd,cjs,esm这三种方式 主要要是修改下webpack.config.output的library.type,参考官方outputlibrary...esm打包出来的居然用不了，这就很坑了，难道是模块使用的问题？
以JSON配置的方式去实现通用性和动态调整，当然，这个通用仍然存在一定的局限性，每个项目的代码风格都不同。...想要写出一个适合所有项目的通用性模块并不容易，这里的通用局限于其所在项目，所以该功能代码如果不适用于自己的项目，希望可以以此为参考，稍作修改。那么现在来分析一下，我们会需要哪些JSON配置项。...一级表头已经可以满足我们许多场景了，但是这并不足够，我的经验中，经常需要用到两行表头甚至是复杂表头，好在EasyExcel是支持多级表头的。...，因为篇幅的关系，我没有贴出完整的代码，但是相信以上内容已经足够大家作为参考，缺少的内容，比如列宽、颜色字体等设置，请查阅EasyExcel官方文档来实现，主要方式就是根据前端传过来的JSON配置信息，...();user.setUsername(fieldName列的值)由此可以得到一个List userList数组，再通过系统的UserService或UserMapper保存到数据库，即可实现数据导入操作
使用MySQL生成 相信大家在开发上都会遇到业务单号生成的需求，一般的生成格式为： 前缀 + YYMMDD + 序列号（例如3位序列号） 这里前缀 + 日期没有太大技术含量，主要是在尾部的序列号，这里要求...使用Redis生成 当然，除了使用MySQL生成，还可以使用Redis来生成。相较于MySQL，Redis的性能更为优良。 这里我们使用Redisson API。...首先我们使用Spring注入一个Redisson客户端： @Bean("redissonService") public RedissonClient getRedissonClient() {...config = useSingleConfig(); } return Redisson.create(config); } 在配置RedissonClient时，可以设置为单机模式...我们先在redis中查找，如果通过key能查到对应的值，则在这个值的基础上增加1。如果值不存在，设置为1。当然，如果当天日期与redis记录日期不是同一天，也需要将值置为1。
我个人认为核心的业务还是适合业务方自己去处理，比如订单支付，会有个支付记录表，一个订单只能被支付一次，通过支付记录表就可以达到幂等的效果。 还有一些不是核心的业务，但是也有幂等的需求。...这种场景下还是需要一个通用的幂等框架来处理，会让业务开发更加简单。 简单幂等实现 幂等的实现其实并不复杂，方案也有很多种，首先介绍下基于数据库记录的方案来实现，后面再介绍通用方案。...通用幂等实现 为了能够让大家更专注于业务功能的开发，简单场景的幂等操作我认为可以进行统一封装来处理，下面介绍一下通用幂等的实现。 ?...加锁是通用的，不通用的部分就是判断这个操作之前有没有操作过，所以我们需要有一个通用的存储来记录所有的操作。 使用简单 提供通用的幂等组件，注入对应的类即可实现幂等，屏蔽加锁，记录判断等逻辑。...幂等的场景也可以定义通用的注解来简化使用难度，在需要支持幂等的业务方法上增加注解，配置基本信息。
前面 FFmpeg 系列的文章中，已经实现了 FFmpeg 的编译和集成，基于 FFmpeg 实现音视频的播放、录制，并结合 OpenGL 添加丰富的滤镜等功能，这些 demo 基本上将 FFmpeg...使用涉及到的知识点基本上覆盖了。...学完这些的你肯定有一些想法，比如使用 FFmpeg 打造一个自己的通用播放器、 做一个音视频剪辑软件等等，那么接下来推荐做的是学习一些优秀的开源项目，音视频的开源项目首推 ExoPlayer、 ijkplayer...项目地址：https://github.com/rockcarry/fanplayer fanplayer 是一个基于 FFmpeg 实现的支持 Android 和 Windows 平台的通用播放器，支持硬解码...、倍速播放、流媒体播放等功能，播放器常用的功能基本上都支持，项目结构清晰，非常方便入手学习。
小勤：用RELATED或LOOKUPVALUE函数都是精确匹配，但，有时候我想实现分区间的操作，怎么办？...大海：类似这种分区间的问题，我一般建议作为数据预处理的一部分，即放在Power Query里进行处理，在Power Pivot里即可以用于做相应的计算。...同时，这种用具体条件筛选得到数据的方法，其实是表间数据匹配的最根本（通用）方法，你可以通过写各种各样的条件去把需要的数据筛选出来，然后取相应的值。...理解了，这的确是一个通用的思路。只是如果表间有关系，而条件有不复杂的，就可以直接用RELATED或LOOKUPVALUE等一个函数搞定了。...在线M函数快查及系列文章链接（建议复制到浏览器中打开后收藏使用）： https://app.powerbi.com/view?
每个js文件都是一个独立的模块 2. 导入模块成员使用import关键字 3....暴露模块成员使用export关键字 */ 推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ES6模块化是浏览器端和服务器端通用的规范....WebPack的基本使用 /* 1.创建列表隔行变色项目 新建项目空白目录,并运行npm init -y 命令, 初始化包管理配置文件package.json 2.新建src源代码目录...webpack.config.js 来设置入口/出口的js文件，如下： const path = require("path"); // 导入node.js中专门操作路径的模块...webpack中加载器的基本使用 打包处理css文件 /* 运行npm i style-loader css-loader -D 命令, 安装处理的css文件的loader */ 2.
(Common Module Definition,通用模块定义) 代表产品为：Sea.js B.服务器端的模块化 服务器端的模块化规范是使用CommonJS规范： 1).使用require...： 1).每一个js文件都是独立的模块 2).导入模块成员使用import关键字 3).暴露模块成员使用export关键字 小结：推荐使用ES6模块化，因为...如果在一个模块中没有向外暴露成员，其他模块引入该模块时将会得到一个空对象 4.设置按需导入/导出 A.按需导出 export let num = 998; export let myName = "jack.../test.js" 注意：一个模块中既可以按需导入也可以默认导入，一个模块中既可以按需导出也可以默认导出 5.直接导入并执行代码 import "....webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性 7.webpack的基本使用 A.创建项目目录并初始化 创建项目，并打开项目所在目录的终端
步骤 安装webpack插件以进行动态主题化 cnpm install antd-theme-webpack-plugin 在您的webpack.config.js文件中导入此插件，使用有效的路径参数初始化并在...默认是[ '@primary-color' ] indexFileName这只是文件名而不是路径。如果您的构建过程将生成一个html文件，那么这就是html文件的名称。...但是如果webpack没有生成那个主要的html文件，那么你需要在你的html文件中手动插入几行,这是使用在需要切换主题的时候动态添加需要的文件 const lessStyleNode =...，在浏览器上直接运行less文件(通过less.js),然后异步的去设置一份color.less去覆盖掉antd的默认样式。...从而达到动态修改主题的需求。 现在一切都准备好了。您需要编写代码，以便通过调用less.modifyVar()函数来更新更少的变量。您可以使用任何有效的颜色值进行调用，主题将更新。
小程序也是一样，小程序所有的方法、过程、类都封装成了一个叫组件的东西，包括微信提供的WEUL组件等等，而且我们还可以自定义组件，把重复使用性高的代码封装成组件方便调用。...自定义组件创建方式，先自已建一个文件夹，命名为 components 在这个文件夹下面创建自已的不同的组件，我们今天创建的就是一个 swiper 图片轮播组件。 ?...文件创建好之后我们先在WXML文件中把需要的代码写上。代码如下：使用微信提供的swiper创建一个轮播组件。...这样一个组件就创建好了。我们引用它的时候怎么引用呢？ 先在需要引用组件的.JSON文件中载入组件。...在WXML文件中，我们根据定义的组件名称，直接引用组件，并把各项参数都在组件里面定义好，这些参数会被组件中的JS文件获取并使用。
如果我们的项目必须要使用 Less 呢，这就需要我们手动集成一下。本篇主要针对集成的过程做一个简要记录。...以上只是在项目中安装了 less 和 less-loader ，但还未曾通过 webpack 使用 less-loader。 至于怎么使用？几种使用方式？...说了这么多，现在怎样才能在我们的项目中暴露 webpack 的配置文件？没错，你没猜错，只需要运行一下yarn eject即可。...首先在src根目录下使用 Less 语法创建一个 less 文件，取名为Test.less： @title-color:#f00; .App-title { color: @title-color...} 然后在App.js文件中通过如下API导入上述的 less 文件： import '.
) webpack 能做什么 webpack是一个静态模块打包器 语法转换 less/sass/stylus转换成css ES6转换成ES5 ... html/css/js 代码压缩合并 (打包) webpack...可以在开发期间提供一个开发环境 自动打开浏览器 保存时自动刷新 项目一般先打包再上线 webpack 的基本使用 webpack基本打包配置 建目录 dist src/main.js 初始化 yarn...不压缩 mode: 'development' } 执行配置的scripts脚本 yarn build 小测试: 假定在main.js中导入一个 aa.js, 多个文件需要打包, wepack.../src/main.js', // 出口 output, 打包到哪里去 output: { // 打包输出的目录 (输出的目录必须是一个绝对路径) path: path.join...在 src / main.js 中导入插件包 // 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size import 'lib-flexible' 配置 vue.config.js
/index.js 2.ES6模块化基本语法 设置默认导入和导出 默认导出语法： export default { 成员A, 成员B, ... } 使用方法 let num =...webpack基本使用 这部分学了n遍了，所以笔记有点预知未来的感觉，希望这次能有好结果 安装和配置webpack文件 运行 npm install webpack webpack-cli –...node中的path模块，path.join()用于连接路径，会正确地使用当前系统的路径分隔符，也就是绝对路径 注意：在上面代码中的出入口文件路径，需要根据自己的文件目录来写，cv大概率报错噢 设置webpack...注意：使用npm run dev是为了实时观看页面，但是不会生成文件，只是一个预览效果，所以我们要生成文件的时候需要使用webpack命令打包 1.打包处理css文件 安装loader包 npm install...test和use的对象，这样就很清晰了 3.打包处理scss文件 这一部分内容我是没有成功的，查了很多资料都没有成功，视频课程讲解的webpack版本是4.x，我用的是5.x，有些东西被弃用了，安装不成功
前言 在前面的篇章中，已经说明了 webpack4 的基本使用，那么本章节开始在 webpack4 中构建vue项目，同时对比看看这种构建方式，与在网页script导入 vue.js 中的区别。...image-20200312233535053 使用webpack打包less文件 安装less-loader less工具来处理less文件 npm i less-loader less -D 在webpack.config.js...[ext]' // [hash:8] 在名称前面设置8位哈希值，[name] 设置文件的原名, [ext] 设置文件的原后缀 } }] },// 处理 图片路径的 loader...image-20200312234328889 区分webpack中导入vue和普通网页使用script导入Vue的区别 上面已经构建好了webpack的基本使用组件，那么下面可以开始在webpack中开始探讨使用...此时就要使用resolve属性来设置导入库别名 alias 了。 7.在webpack.config.js中添加resolve属性： 首先将导入包的方式改回去，如下： ?
通用配置文件webpack.base.js，开发环境配置文件webpack.dev.js以及生产环境配置文件webpack.prod.js。...webpack.HotModuleReplacementPlugin，在devServer中，我们还可以设置开发环境中的代理proxy，这已经是目前开发的默认模式了，代码中一些属性的用法和含义我都做了注释...到此，我们基本的一个支持ES6+Less/css+JQuery的单页应用打包工具已经做好了，当然这只是基础，后面的多页应用，vue/react/typescript都是在这个基础上构建的，让我们拭目以待...下的html路径，title是我们要植入html模版中的titl标签中的内容，我们在index.html中这么使用： <!...值得注意的是vue文件中引入资源的问题，使用相对路径会有问题，这里我们可以使用~/images/logo.png的方式或者require的方式来引入图片。
工程化开发模式优点： 提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等 工程化开发模式问题： webpack...配置不简单 雷同的基础配置 缺乏统一的标准 为了解决以上问题，所以我们需要一个工具，生成标准化的配置 2.脚手架Vue CLI 基本介绍： Vue CLI 是Vue官方提供的一个全局命令工具...十、普通组件的注册使用-局部注册 1.特点： 只能在注册的组件内使用 2.步骤： 创建.vue文件（三个组成部分） 在使用的组件内先导入再注册，最后使用 3.使用方式： 当成html标签使用即可... 4.注意： 组件名规范 —> 大驼峰命名法， 如 HmHeader 5.语法： // 导入需要注册的组件 import 组件对象 from '.vue文件路径' import...2.全局组件在项目中的任何一个组件中可不可以使用？
我的前端之路笔记 cdn资源 cdn资源 webpack官网 webpack插件 webpack笔记 解决作用域问题 快速执行函数 ;(function(){ … }) 解决代码拆分问题 node...,'node_modules')] //排除外部modules 可设置两个配置 一个全局一个局部 如下 在webpack配置 全局配置 { test: new RegExp(`^(?!....线程，请告诉我今天的幸运数字是多少？’...:false 小即快 使用更少或者更小的library 在多页面应用使用splitChunksPlugin 并且开启async 移除未引用代码 只编译当前正在开发的代码 持久化缓存 在webpack配置中使用...cache选项 使用package.json中的 “postinstall” 清除缓存目录 将cache类型设置为内存或者文件系统 memory 选项很简单 它告诉webpack在内存中存储缓存 cache
是一个功能更加强大的前端路由器，推荐使用。...C.ES6模块化 ES6模块化规范中定义： 1).每一个js文件都是独立的模块 2).导入模块成员使用import关键字 3).暴露模块成员使用...webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性 ###7.webpack的基本使用 ####A.创建项目目录并初始化 创建项目，并打开项目所在目录的终端...–port 9999” 10.配置html-webpack-plugin 使用html-webpack-plugin 可以生成一个预览页面。...属性设置验证规则 4.导入axios以发送ajax请求 打开main.js，import axios from ‘axios’; 设置请求的根路径：axios.defaults.baseURL = ‘http
使用webpack打包less文件 使用webpack打包sass文件 使用webpack处理css中的路径 使用babel处理高级JS语法 相关文章 Webpack解决了哪些问题 在网页中会引用哪些常见的静态资源...什么是webpack webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具； 如何完美实现上述的2种解决方案 使用Gulp， 是基于 task 任务的； 使用Webpack...初步使用webpack打包构建列表隔行变色案例 运行npm init初始化项目，使用npm管理项目中的依赖包 创建项目基本的目录结构 使用cnpm i jquery --save安装jquery类库 创建...main.js并书写各行变色的代码逻辑： // 导入jquery类库 import $ from 'jquery' // 设置偶数行背景色，索引从0开始，0是偶数 $('#list...： // 导入处理路径的模块 var path = require('path'); // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js
/config/webpack.config.dev.js -c可用 -config替换 注意生成的文件的路径 生产环境 在config目录下新建 webpack.config.prod.js文件 修改...,'node_modules')] //排除外部modules 可设置两个配置 一个全局一个局部 如下 在webpack配置 全局配置 { test: new RegExp(`^(?!....线程，请告诉我今天的幸运数字是多少？'...:false 小即快 使用更少或者更小的library 在多页面应用使用splitChunksPlugin 并且开启async 移除未引用代码 只编译当前正在开发的代码 持久化缓存 在webpack配置中使用...cache选项 使用package.json中的 "postinstall" 清除缓存目录 将cache类型设置为内存或者文件系统 memory 选项很简单 它告诉webpack在内存中存储缓存 cache
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
