- 博客(269)
- 资源 (17)
- 收藏
- 关注
RSS订阅原创 webpack随笔07-bootstrap
上一篇讲了webpack集成bulma这个css框架，本文讲下webpack集成bootstrap框架上文：webpack随笔06-bulma_uikoo9的博客-CSDN博客 bulma：Bulma: Free, open source, and modern CSS framework based on Flexboxbootstrap：Bootstrap · The most popular HTML, CSS, and JS library in the world.通过文件的方式引入css，js就
2022-06-15 23:00:00
440
1
原创 webpack随笔06-bulma
推荐一个网站：Find the best package for you and test it online, Analyze tech stack for your project. | DEVTOOL.TECH这里可以看到npm包各种信息，比如按npm包star数排行，下载数排行，以及npm包详细信息等 npm包详情内，有很多聚合的信息这个网站比较有意思，可以看到目前流行的npm包是哪些流行npm包（star排行）中，css类前三：bootstrap（老牌大哥），element-ui，bulma，Bu
2022-06-14 23:00:00
343
原创 centos随笔04：acme.sh申请https证书
搭建网站的时候，有的网站地址是http://xxx，有的是https://，两者的不同是https更安全，申请了ssl证书，前几年http类的网站还挺多，目前看基本都是https类网站了，ssl证书有各种档位，免费，收费每年几百，几千到几万各不同，如果是自己搭建网站使用免费证书应该够用了，一般申请免费证书使用acme.sh比较方便github：GitHub - acmesh-official/acme.sh: A pure Unix shell script implementing ACME client
2022-06-08 11:31:17
998
3
原创 centos随笔03：centos8.2安装mysql
【mysql/mariadb】由于使用的是腾讯云轻应用服务器，这里安装mariadb替代【dnf/yum】dnf是yum包管理器的升级，虽然在服务器上这两个命令都可以用，建议使用dnf管理包【检索mariadb】dnf search mariadb通过search命令可以检索可以安装的应用包【安装mariadb】dnf install mariadb mariadb-server在centos下需要安装mariadb和mariadb-ser...
2022-05-31 15:17:14
319
原创 centos随笔02：安装nodejs
【前言】安装nodejs有很多种方式，但是nodejs的版本管理常见的是通过n或者nvm管理n - npmhttps://github.com/nvm-sh/nvm【n vs nvm】简单的对比一下，感兴趣的可以在网上找一些资料看下n，是一种npm包，也就是说一般你得先安装好nodejs，有了npm环境后，才能使用nnvm，不依赖nodejs和npm环境，直接可以使用从个人以前使用的经验上来看，n比nvm比较好用【nodejs下安装n】如果已经有nod..
2022-05-27 14:53:28
441
原创 centos随笔01：设置alias
【alias】别名，一些常用的命令可以设置别名方便后续使用，例如将clear设置为cls【设置】alias可以配置到任意地方，一般会放在~/.bashrc这个路径vim ~/.bashrc打开文件后在红框的部分继续添加自己想设置的别名，然后保存【生效】添加别名后还要通过source命令让别名生效source ~/.bashrc生效后即可使用你自己设置的别名了...
2022-05-27 14:26:14
522
原创 webpack随笔05-less-loader
【前言】less也是用的比较多的css预编译语音的一种，详见：Getting started | Less.js最早是因为大名鼎鼎的bootstrap使用less，所以比较有名【less-loader】webpack解析less文件需要使用到less-loader，详见：less-loader - npm用法也比较简单，如下module.exports = { module: { rules: [ { test: /\.less$/i..
2022-05-20 20:16:12
661
原创 webpack随笔04-webpack5压缩js&css
【前言】webpack5的压缩大致和webpack4相似，稍微有一些不同【不压缩css】dev模式下不需要压缩css，且讲css以style的形式注入到html即可 rules: [ { test: /\.css$/, include: [ /node_modules[\\/]antd/, /node_modules[\\/]normalize\.css/, /iconfont\.cs...
2022-05-07 18:47:11
1911
原创 Electron实战QZip-03：渲染进程开发
【前言】上一节讲了electron应用的主进程开发部分，本节继续渲染进程的开发Electron实战QZip-02：主进程开发_uikoo9的博客-CSDN博客【渲染进程开发模式选择】上节讲了使用qiao-electron-cli init生成的代码项目结构qzip，主项目，主要是构建mac应用和dmg打包，以及提供dev的electron环境｜--qzip-pack，打包相关的配置文件和图标等｜--qzip-src ｜--qzip-main，主...
2022-05-04 22:23:34
653
原创 Electron实战QZip-02：主进程开发
【前言】上一节Electron实战QZip-01：初始化项目&打包应用_uikoo9的博客-CSDN博客主要讲了使用qiao-electron-cli - npm的相关命令1.init，生成一个electron的项目2.icon，生成mac下icns图标3.packmac，生成mac应用4.packdmg，生成dmg安装包5.config文件介绍本节可以QZip这个应用的主进程开发【qiao-electron】electron主进程开发中有很多..
2022-05-03 22:43:48
583
原创 Electron实战QZip-01：初始化项目&打包应用
【前言】Electron那些事系列：Electron那些事01：起步_uikoo9的博客-CSDN博客主要是介绍Electron常见的特性，从本章开始实战做一个Electron应用【QZip】第一个实战项目不能太大，还需要把之前讲的内容串起来，想来想去，做一个zip压缩和解压缩的工具吧，名字暂定QZip【qiao-electron-cli】在写Electron那些事系列过程中，抽了一个electron打包相关的工具，qiao-electron-cli - ...
2022-05-02 23:13:18
802
原创 一文学会用Lerna管理多个npm包
【前言】大部分开发项目来说，一般都是一个项目对应一个代码库，这样分工比较明确，也比较好管理，monorepo，单一代码库，是将多个项目集中在一个代码库内，几种场景1.多个项目集中在一起比如将前端项目，后端项目，移动端项目，都集中在一个代码仓库内参考文章：5分钟搞懂Monorepo - 简书2.前端管理多个npm包项目前端项目中一般会涉及多个npm包项目，一般每个npm包项目单独一个代码仓库这种场景下，将多个npm包项目集中在一个代码仓库内管理【lerna安装...
2022-04-15 16:43:54
3175
原创 Electron那些事11：快捷键和黑暗模式
【前言】本节讲下electron下设置快捷键和mac黑暗模式的使用【快捷键设置】快捷键设置比较简单，下面是全局快捷键设置globalShortcut.register(shortcutKey, shortcutCallback);传入快捷键名称，和快捷键回调即可这里需要在app退出时释放掉全局快捷键，如下 app.on('will-quit', () => { globalShortcut.unregisterAll(); });【黑暗..
2022-04-06 18:31:25
1453
原创 Electron那些事10：本地数据库sqlite
【前言】上一节讲了本地日志，本地数据（文件）的部分，详见：Electron那些事09：本地数据_uikoo9的博客-CSDN博客虽然本地日志可以记录日志信息，本地数据可以记录简单的配置文件，但是像一些复杂的业务，需要维护一个本地数据库进行查询，本节讲一下本地数据库sqlite【sqlite】sqlite是有名的本地数据库，在很多系统中都有应用，SQLite Home Page当然也有nodejs的版本，一般配套和electron使用，sqlite3 - np...
2022-04-02 19:57:18
8344
4
原创 Electron那些事09：本地数据
【前言】electron开发桌面应用后，不可避免的要记录一些本地数据，类似web浏览器中的cookie，session，localstorage，websql，indexeddb这些本节来讲一下electron怎么记录本地数据【本地日志】Electron那些事06：本地日志和异常上报_uikoo9的博客-CSDN博客这一节讲了通过log4js记录本地日志，文章内只讲了传一个filename：vq.log，但是并没有说这个日志文件会记录到那里，本节来探索一下首先回顾..
2022-03-30 17:06:27
2563
原创 Nodejs支持es6语法
【前言】nodejs是否支持es6语法呢，网上搜索大部分答案是要基于babel转一下才能支持，其实目前nodejs的版本已经支持了es6语法了
2022-03-29 22:01:16
4287
原创 Electron那些事08：通过preload让渲染进程支持nodejs
【前言】标题有点长，本节想讲的是如何让渲染进程支持nodejs的能力，Electron那些事04：进程通信_uikoo9的博客-CSDN博客04章节讲过一种方式，通过设置如下的属性本节要讲的是另一种方式，供参考【非preload的方式】在复述一下04章节讲的方式1.主进程中，打开一个window的时候，设置这些属性 webPreferences.nodeIntegration = true; webPreferences.co...
2022-03-23 21:16:58
4903
3
原创 Electron那些事07：窗口定制
【前言】之前章节简单介绍了窗口，本节介绍一下窗口定制，Electron那些事03：渲染界面_uikoo9的博客-CSDN博客【默认窗口】接之前的例子，可以看到mac上默认窗口会有一个标题栏，但是实际开发中基本没有这种默认的标题栏【无边框窗口】第一种方式是为window添加frame属性，设置为false，这样就是无边框窗口了效果如下【设置标题栏样式】上述效果可以看到左上角的关闭按钮也没有了，这个不是想要的效果另一个方式是设置标题...
2022-03-23 12:00:36
2128
原创 webpack随笔03-sass
【前言】sass，css预编译语言的一种，还有less，stylus等，详见：Sass: Syntactically Awesome Style Sheets简单来说就是自定义了一种语言，可以很方便的写css，并且最终会编译为css文件，简单对比一下，less，由于bootstrap使用，所以用的人比较多，但是没有sass好用sass，比较好用，之前基于ruby的问题，sass缩进的问题都有改善【几种版本】在官网上可以看到sass有几种版本dart sass，这...
2022-03-22 18:06:37
1121
原创 Electron那些事06：本地日志和异常上报
【前言】开发应用，绕不开本地日志，异常上报，crash分析，数据上报这些，除非就是做来玩一下，本节讲一下常见的本地日志和异常上报。【本地日志】日志，不管是本地日志，还是日志框架，还是日志平台都有非常成熟的体系了，electron应用记录日志，直接使用log4js即可，详见：log4js-node by log4js-node用法也比较简单，可以自己看看文档，主要有这些appender按date记录日志，按文件大小记录等这里选择datefile的方式记录，代码类..
2022-03-19 12:59:26
4447
原创 Electron那些事05：保护源码asar
【前言】回顾之前的章节Electron那些事02：打包_uikoo9的博客-CSDN博客打包应用这里还有一个优化点，本节来优化一下【对比Electron应用】对比几个electron应用的文件结构vscode，app文件夹下可以看到部分源码某网盘，app对应的位置是一个app.asar文件，无法直接打开本文应用vq，app文件夹下可以看到所有源码看到这里有几个问题1.为什么有的应用app文件夹下可以看到所有源码（相信我，不仅仅是示例的vq应..
2022-03-17 17:33:53
3463
原创 Electron那些事04：进程通信
【前言】接上一章，继续实现以下功能，login窗口登录成功后，关闭login，打开index窗口【进程通信】上节讲到主进程和渲染进程的区别，其实最常见的是主进程和渲染进程之间通信ipcMain，ipcMain | Electron从主进程到渲染进程的异步通信ipcRenderer，ipcRenderer | Electron从渲染进程到主进程的异步通信渲染进程login中，点击login按钮，进行校验，校验成功后通过ipc发信息给主进程，代码如下..
2022-03-16 19:46:13
2119
原创 Electron那些事03：渲染界面
【前言】js技术栈开发桌面端很大的优势就是ui界面开发比较快，对比原生的桌面端开发要快很多，并且基于chromium内核，支持最新的html5，css3特性，又可以开发出很酷炫的ui。总结一下就是electron开发ui界面，又快又好～【打包代码结构调整】接上一篇文章的代码结构，如下，只有src内是最终桌面应用的代码，其余的是提供electron开发环境&打包相关的代码，为了方便后续引入渲染进程相关代码，这里做一些拆分1.将src文件夹修改为electro..
2022-03-16 14:19:23
3633
原创 webpack随笔02-babel-loader
【前言】使用webpack，或者说前端开发逃不开babel，Babel · The compiler for next generation JavaScript简单的说，目前浏览器的环境不支持一些高级js特性，babel用来抹平这些特性，通过babel可以讲高级特性写的js代码转为浏览器支持的版本，比如将es6的代码转为es5的代码【babel支持react】假设目前有一段简单的react代码，如下由于其中采用了jsx语法，如何使webpack支持jsx语法，...
2022-03-14 19:32:01
854
原创 webpack随笔01-html-webpack-plugin
【前言】看过webpack手册系列（翻译官方webpack guides，并添加示例）后基本可以上手webpack，其中有一章讲到使用html-webpack-plugin这个插件生成html，webpack手册-03-Output Management_uikoo9的专栏-CSDN博客但是使用相对比较简单，遇到一些复杂的场景就不知道怎么操作了，本章介绍一下html-webpack-plugin这个插件github地址：GitHub - jantimon/html-webpack..
2022-03-14 17:29:10
1822
原创 Electron那些事02：打包
【打包】接上回Electron那些事01：起步_uikoo9的专栏-CSDN博客简单介绍了electron，以及做了简单demo使用electron做了一个桌面应用demo，相信大家现在最想做的事情就是将桌面应用打包后发个其他人体验，本节开始electron打包【electron-packager】官方推荐的打包工具有3个几个工具的区别后续单独写一篇文章介绍，简单的说electron-forge和electron-builder都是打包工具集功能比较多，适合想快速上...
2022-03-10 20:06:55
4828
原创 mac m1以root运行vscode：Unable to write program user data.
【前言】今天换了新电脑，mac m1 32g的，结果vscode出问题了以前都是在命令行下线sudo su到root用户，然后code .启动打开代码项目今天操作一样，结果提示Unable to write program user data.十分抓狂，搞了好久才搞定，记录一下【几种尝试】1.sudo code . 失败2.尝试给提示中的两个路径添加权限，试了admin，staff等权限，都失败3.通过vscode内自带的添加shell code后，执行，失败
2022-03-10 18:26:21
1044
原创 Electron那些事01：起步
【前言】从js说起，js最初是浏览器端的脚本，但是随着nodejs的出现，拓展了很多能力，可以开发server端的服务，后续又有electron出现，又可以开发桌面端应用（win，mac等）electron简单说就是将nodejs和chrome内核（chromium）打包到一起，抹平了os层（windows，mac，linux）的差异 ，提供一些简单的api供大家开发桌面应用类似的还有nwjs，但是nwjs更新比较慢，文档比较差，问题比较多，这里还是推荐electron来开发桌面应用..
2022-03-09 19:01:47
1238
原创 Conventional Commits那些事
背景不规范的commit msg在开发过程中大家应该不少见一些不规范的commit msg，类似这样fixupdatecommit等等，完全不知道本次commit提交改动是什么各种change log开发过程中见过各种change log，就是变更日志，一种是完全没有记录变更，随便发版，这样发版后不知道当前变更是什么，或者干脆发布后不知道当前是新版本还就旧版本第二种是会记录版本号，但是当前的版本的一些变更都不知道，这种情况大部分也是由于不规范的commit m..
2022-01-26 15:24:15
1172
原创 NW.js-01-简介和使用
简介NW.jsnw.js和electron相似，是前端开发桌面端应用的框架，且两者架构也相似都是基于node.j和chromium进行封装，这样在渲染层就可以用html,css,js等前端技术实现，在处理层就可以用nodejs实现，不管是v8还是chromium都是各自行业内的翘楚，这种架构还是很赞的，而且抹平了os层的一些特性，可以生成win，mac，linux等系统下的桌面应用看一下官方的描述下载在官网可以下载，Downloads，可以选择自己..
2022-01-04 19:48:20
11543
原创 多人实时写代码replit.com试用
【整体感受】The collaborative browser based IDE - Replit体验一遍后，有几个感觉 一个加强版的github，replit做的功能，github后续都可以实现 核心的在线编辑功能很强大，基本能想到的功能都有，编辑，版本控制，开发环境，debug，包管理等等 相当于安装了vscode+git+nodejs（开发环境）+im+论坛 几个亮点，多人实时编辑代码，虚拟开发环境 一站式在线代码编辑平台【缺点】...
2021-12-17 21:09:51
4331
5
原创 webpack手册-12-Shimming&End
Shimmingwebpack支持es6的模块化，commonjs的模块化和amd的模块化，但是有一些库不是这几种模块化，且需要一些前置依赖，比如jquery的$一样，本章讲这些前置依赖Shimming Globals全局的前置依赖，基于ProvidePlugin提供全局的前置依赖代码修改和配置文件修改构建没问题效果ok代码见：GitHub - uikoo9/webpack-guides at 0.3.6...
2021-12-07 21:18:26
353
原创 webpack手册-11-Production&Lazy Loading
Production开始讲生产环境如何配置了~Setup由于生产环境和开发环境的述求不同，一般会准备两个webpack的配置文件，对应不同的环境，由于会有一部分公共的配置，所以还需要一个公共的配置文件说实话，之前没看过webpack这个手册，直接看的api，后期实践中确实也是这么分的，哈哈由于有3个配置文件了，涉及一些merge的操作，需要用到webpack-merge的库，进行一些配置项的合并，webpack的配置项比较多，复杂webpack.dev.js，..
2021-12-07 17:10:33
228
原创 webpack手册-10-Tree Shaking
Tree Shaking去掉没有使用到的上下文代码Add a Utility添加一个math.js，和修改配置文件，如下构建没问题可以看到构建后的代码内有没有引用过的square这个方法代码见：GitHub - uikoo9/webpack-guides at 0.3.3...
2021-12-07 15:45:35
80
原创 webpack手册-09-Hot Module Replacement
Hot Module Replacement热更新，由于大型项目开发中会有很多组件，如果开发某个组件时，每次修改都刷新页面，一方面比较耗时，一方面比较慢，热更新会只刷新你修改的组件，在开发时算是比较有用，不过非大型项目刷新页面和hmr感知差不多Enabling HMR开启热更新功能，在webpack配置文件中的devServer中添加hot:true即可，webpack-dev-server在4.0.0版本后默认会开启，看了下目前已经是4.5.0版本了，所以不修改配置文件也是默认...
2021-12-06 21:18:13
621
原创 webpack手册-08-Build Performance
Build Performance这章开始讲构建这个过程的一些优化技巧了，感觉结合实战来讲更好一些，可以先看看General通用的一些配置Stay Up to Date更新到最新版本，大型项目要及时更新到最新版本，如果一段时间没有更新，再次想更新就需要比较慎重的检查一下了Loaders每个loader最好指定使用的范围，如果没有指定webpack默认会过项目中所有文件，如果是大型项目，那么这个过程会很慢要擅长使用include和excludeB...
2021-11-26 20:39:27
446
原创 webpack手册-07-Authoring Libraries
Authoring Libraries这章相对比较有意思，也算是webpack的一个简单应用，可以发布自己的代码库，通过简单地配置兼容各种规范，比如cmd，amd，commonjs等Authoring a Library这章的代码结构和之前的不一样，拉一个新分支修改，示例做了一个从阿拉伯数字转单词的代码库，目录结构，npm安装包Webpack ConfigurationExpose the Librarywebpack配置文件中添加了libra...
2021-11-26 19:47:13
84
原创 webpack手册-06-Caching
CachingOutput Filenames这个比较常用，对文件内容进行hash，这个值当做文件名，如果内容有改动，文件名就会改动，可以避免浏览器，服务器或者cdn的缓存修改下配置文件，比较简单构建没问题可以看到，构建后的js文件名已经是内容hash了代码见：https://github.com/uikoo9/webpack-guides/tree/0.2.4...
2021-11-26 16:06:51
238
原创 webpack手册-05-Code Splitting
Code Splitting代码分离，终于讲到了webpack中比较核心的一些能力了这章的代码沿用get started章节的代码，也就是0.0.4 tag的代码，详见：webpack手册-01-Getting Started_uikoo9的专栏-CSDN博客Entry Points加了一个新js文件，修改了配置文件主要是两个js文件都引用了lodash构建依旧没问题两个都引用lodash的文件内容代码见：GitHub - uikoo...
2021-11-24 15:50:57
411
原创 webpack手册-04-Development
Development总算添加了mode，要不每次构建都有提示构建同样没问题，并且少了提示，比较清爽代码见：GitHub - uikoo9/webpack-guides at 0.1.4Using source maps开始添加source map了，在真实开发中这个必不可少，要不出问题都不知道是哪里的问题，实际开发中建议打开source map，虽然关闭可能构建会快一些。修改配置文件，添加devtool属性构建依旧没问题看...
2021-11-12 16:44:11
432
Java+FlashWavRecorder实现网页录音并上传
2014-09-18
javaee加密部署
2014-07-23
Java做的锁屏软件【附源码】
2013-09-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人