SnowKagura‘s blog - json
type: channel
link: https://www.snowkagura.com/tag/json/
items: 记一次Typecho插件开发历程
items: 从零开始搭建react开发环境（进阶篇）

记一次Typecho插件开发历程
type: item
date: 2022-03-24T18:32:00+08:00
description: 前言关于typecho的插件开发这块，可谓是一片空白，什么文档都没有，完全靠自己摸着石头过河。开端因为前几天在handsome主题里面发现了一个追番的独立页面显示，然后就立刻尝试了。结果发现这个原插件是一股脑把个人的所有追番记录全部塞到网页内容一口气加载，我当时就想，这可不行啊，我两百多部追番，这样加载性能影响太大了，我得做个分页逻辑。然后就开始了我的插件改写之路。动手我立马跑到插件文件夹开始阅读源码，然后想到了一些解决方法，刚好原作者也提供了json的序列化，这可让我高兴了有好一阵，最开始我是用了原生的php方法来当做接口调用的，然后我觉得这太不优雅了，所以后来就改写了。为了优雅的注册接口（用上typecho的钩子），我还是查阅了一堆资料的。首先就是得介绍一下Helper::addAction()这个方法，这就是我采用的注册接口路由的方法，通过这个方法，我可以把路由注册到/action/xxx上面，然后这个方法对应的实现是必须在插件根目录下的Action.php里面，并且要和Plugin.php中的插件名相同，也就是比如说Plugin.php中的类是叫做xxx_Plugin，那么Action.php中的类也必须叫做xxx_Action。然后关于该类需要继承的接口，则需要implements Widget_Interface_Do，为了读取插件的设置，我们还需要extends Typecho_Widget，这样我们就可以开始开发了。tips首先关于插件的启用和卸载需要addAction和removeAction，以免垃圾占用action接口。读取配置文件可以调用Typecho_Widget::widget('Widget_Options')->plugin('插件名')->属性这里的配置项是在Plugin.php中的config函数中的形如new Typecho_Widget_Helper_Form_Element_Text('属性名', NULL, 'placeholder', _t('提示'));设置的然后还有就是关于php相关的问题：对于文件IO相关的API，需要确保php有写入权限，这一块就涉及到将操作的文件夹权限改为777或者给网页服务软件授予权限之类的一些操作最后这次的成果就是：https://www.onesnowwarrior.cn/bilibili.html 这个页面啦 然后我也把这次开发插件的源码上传到了Github，欢迎Star~

从零开始搭建react开发环境（进阶篇）
type: item
date: 2022-02-14T18:05:00+08:00
description: [scode type="share"]上篇文章写的有些简略，而且有些地方在实际开发中还是有一定问题存在的，所以就有了这个进阶篇，这篇文章也是因为最近在搞前端开发，所以顺便总结一下[/scode]大纲首先我先说明一下这次使用的技术栈：less css预处理器，知名的还有sass、scss、stylus等react 主要的开发依赖库typescript 提供静态类型等诸多好处webpack 打包工具webpack-dev-server 开发用服务器react-router 路由管理库axios 网络请求库babel es新特性等代码的polyfill以这些作为主要的开发工具和生产依赖，除此之外还有一些关于webpack打包的插件，babel的插件之类的都会在后续进行一一说明步骤首先，我们从新建文件夹开始mkdir my-app \ && cd my-app \ && npm init -y然后我们就开始装依赖了npm install react react-dom react-router-dom axios --save-exact以上是几个生产环境所需要的依赖，所以放在一起进行安装，这里的--save-exact是为了把下载下来的依赖库版本固定，从而避免不同人开发时因为版本更新导致的诸多问题现在我们开始安装开发方面的依赖库，这里要使用一个参数--save-dev，说明这些依赖只在开发时使用npm install @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/runtime @babel/preset-typescript --save-dev \ && npm install webpack webpack-cli webpack-dev-middleware webpack-dev-server webpack-merge --save-dev \ && npm install typescript @types/react @types/react-dom @types/webpack @types/node ts-node --save-dev \ && npm install less less-loader css-loader babel-loader style-loader --save-dev \ && npm install clean-webpack-plugin css-minimizer-webpack-plugin fork-ts-checker-webpack-plugin html-webpack-plugin mini-css-extract-plugin --save-dev这里可以看到，有非常多的开发方面的依赖，在这里我一行一行的进行解释首先第一行，我们可以看到都是关于babel方面的一些库，下面是它们的作用@babel/core babel的核心库@babel/plugin-transform-runtime 和 @babel/runtime 提供对async/await功能的支持@babel/preset-env 提供对ES规范新功能的支持@babel/preset-react 提供对react相关代码规范的支持@babel/preset-typescript 提供对typescript代码的支持babel主要的作用就是为了提供对一些浏览器不支持的语法进行降级转换的作用，使得其可以在浏览器运行然后是第二行，关于webpack的一些功能模块webpack 和 webpack-cli 一个是核心库，一个是命令行支持webpack-dev-middleware 和 webpack-dev-server 对开发环境提供热替换开发服务器功能webpack-merge 用于对配置文件的merge，方便进行配置文件的区分管理（ts原生也可以合并，但是这个比较智能）第三行，关于typescript方面的一些模块声明文件还有typescript自身，这里就不做详细解释了第四行，提供了less支持和一些webpack读取相关文件的相应loader第五行，关于webpack的一些插件clean-webpack-plugin 在打包生成文件时会对之前的文件进行相应的清理操作，主要是为了修复webpack-dev-middleware在启用writeToDisk功能时，webpack原生配置启用自动清理却无法清理的bugcss-minimizer-webpack-plugin 对打包生成的css进行最小化压缩处理fork-ts-checker-webpack-plugin 提供在…