wordpress英文站更新通知目录,重庆报考网,惠州网站建设优化,网络服务器机柜长夜漫漫#xff0c;无心睡眠。心中所想#xff0c;心中所感#xff0c;忧愁当前#xff0c;就执笔而下#xff0c;写下这篇文章。 回忆过往
回想当初为啥学前端#xff0c;走前端这条路#xff0c;学校要求嘛#xff0c;兴趣爱好嘛#xff0c;还是为了钱。 时间带着… 长夜漫漫无心睡眠。心中所想心中所感忧愁当前就执笔而下写下这篇文章。 回忆过往
回想当初为啥学前端走前端这条路学校要求嘛兴趣爱好嘛还是为了钱。 时间带着我的回忆回到了21年也是我人生得转折点那时候大学分班直白点就是选择路线因为我们是软件工程专业所以软件方面都学习过软件设计模式数据结构算法计算机网咯数据库web程序设计计算机组成原理项目管理等等科目甚至硬件我们也有实操示波器焊接组装板块都玩了一下。可以说学的很杂软件工程专业得学生其实学得更多得都是偏后端得科目像前端这种可能不入大学老师得眼所以前端是没有专门的课程得。当时黑马也来我们学校合作过带着我们写项目后端java,微服务。最让我们印象深刻得是他们培训毕业班工资情况当时很惊讶月薪一万两三万都有。但是现在仔细想想那些都是外包公司包装了几年工作经验进去的。是啊当时java后面很高薪啊而且上限总体要比前端高啊。大数据那时候也很火啊甚至人工智能python也火。挺迷茫得不仅是我还有我的室友嘛。每个人得人生仿佛都在那时候决择了。 我也问了很多身边出去工作的人建议都是选人工智能大数据这些比较吃香。不过我们还是很理智得人工智能选不得没有个研究生身份选它很难找到工作而且我们学校不出名。其实当我们问别人得时候心里已经有个不确定得而想选择得答案。对于我来说大数据跟后端我都能玩只是感觉比较枯燥相比于前端页面直接能看到更加得吸引我的注意力后端上限是高但又有几个能达到月薪五万呢我们更多得是平凡人不是大牛。这就是我走了前端路线得答案没那么枯燥可视化。
迷茫当下
也许很多人转行过来得学前端是因为IT得高薪工作为啥不转后端呢因为相对于后端前端更好学点。这个不得不承认我做兼职得时候就遇到好多都是转行过来得然后花钱请教问题解决得。所以就造成了人员很多过来一起卷大环境得不行很多公司都在裁员加上AI得出现。所以会搞得人心惶惶。工作几年了到了涨薪得年纪公司还降薪很多人都都说大环境不好能苟着就苟着面试机会也少。 所以现在很多公司裁高低招你不干自然有的是人干造成行业内卷加剧。 金三银四我也投了试一下面了几家公司有一家公司让我印象很深刻深刻在什么地方呢他问了我很底层js底层问我js怎么来的如果不用它得已有api让你去判断它是什么类型你怎么判断。当时我回答上了引用数据类型可以用原型连得方式去判断。但是基本数据类型我就懵了像0好像用不了__prototo__吧不过它确实有个API可以进行获取到它得原型对象一生万物万物皆对象确实都可以用原型链来判断。 他问了我几个比较难得问题最后我问他你们公司是要搭建自己得框架嘛还是做要插件组件库。一问啥都没有都在计划中听了他的业务描述纯纯的切图崽就能完成得东西干嘛问这种问题。我是有点想不通得。我也面了一家本来说是人事面得然后面试得时候又加技术面一直在问我解决方案然后我问他我看你一直不满意我的方案你是有更好得方案嘛能介绍一下嘛然后他说的跟我前面差不多总感觉是套我方案得感觉然后就没然后了。还是面试一些中大型公司比较好我回答不好的时候他能很清楚得解答给我听。虽然没过但也让我收获不少。
提升自我
这段时间我也陷入了迷茫到底想活出怎样的人生。 我也问过同事他是怎么说的我相信我的价值还是比人工智能要强的大不了去摆地摊。是啊与其自我焦虑不如有空的时候提升自己。哪怕出去玩都比精神内耗强谁知道明天是怎样的呢。还不如静下来提升自我。在思考一番后我的灵感来了。最近一直没写作也不是说摆烂了。而是没有一个idea自己要干嘛。想要干嘛。 因为之前做了两个公司的项目跟同事写了六七款日历组件所以就想能不能写一个日历库因为都是移动端的Taro开发的网上没找到一个模板公司也在弄移动端组件库刚好我也参与其中所以我也能一边学习 一边弄个自己的作品。所以我就自己搭建一个。
总体设计
构想 搭建框架 构建总体目录 编写组件 组件测试 打包发布 网站展示 网站设计网站展示mark展示代码代码高亮复制例子渲染锚点展示接口文档兼容打包发布 进行部署。 当时我的构思是这样的当时组件的打包跟网站还是不一样的。所以我就考虑从vitewebpack,rollup三个其中一个进行打包因为rollup不是很熟悉就打算用它来打包也是抱着一个学习的心。然后网站的打包就用taro自带配置的进行打包当然内置的是webpack。 先上效果图毕竟前端要最后呈现的东西为主。
使用技术Taro React Ts React-router-dom rollup webpack5
效果图
1.常用日历组件
2.带弹窗日历组件 3.滑动日历组件 4.简单日历组件 5.选项日历组件 6.星期日历组件 目前展示这几个组件。等有其它想法继续添加。 预览地址地址
目录结构
wskCalendar
├─ config //taro配置
│ ├─ dev.ts
│ ├─ index.ts
│ └─ prod.ts
├─ src
│ ├─ api
│ │ └─ test.ts
│ ├─ components //日历组件
│ ├─ images //日历组件图片
│ ├─ index.html
│ ├─ index.ts //日历组件打包入口
│ ├─ pages //测试展示入口
│ ├─ routes //配置测试路由
│ ├─ style //样式
│ │ ├─ common.scss
│ │ ├─ index.scss
│ │ └─ website.scss //网站全局样式
│ ├─ types
│ ├─ utils //工具函数
│ └─ website //网站架构
│ ├─ assets //网站资源
│ │ └─ images
│ ├─ components//展示组件编写
│ ├─ guide//指南
│ ├─ home//首页
│ ├─ index
│ ├─ layoutCom//部局组件
│ └─ routers//路由
│ ├─ demoRoutes.ts
│ ├─ index.ts
│ ├─ sidebarTabs.ts
│ ├─ topbarTabs.ts
│ └─ websiteRoutes.ts
├─ .editorconfig
├─ .eslintrc
├─ .gitignore
├─ babel.config.js
├─ buildJson.js //处理package.joson
├─ copy-rollup-postcss-inject-to-css.mjs//自己编写的插件处理scss
├─ jest.config.ts
├─ markdown-loader.js//自己编写插件处理md文件
├─ myRollupPlugin.mjs
├─ package.json
├─ project.config.json
├─ project.tt.json
├─ README.md
├─ rollup.config.mjs
├─ tsconfig.json
├─ types
├─ yarn.lock插件编写
buildJson.js 处理打包package.json写入插件type:module’必须是这个配置在这里不然Taro的Api没办法使用这个问题我找了一天这也是taro的一个坑。移除自己的插件避免下载依赖进行了套娃处理。 const fs require(fs)
const path require(path)
const chalk require(chalk)
const __dirnameNew __dirname;
let rootPath path.join(__dirnameNew, package.json);
let filePath path.join(__dirnameNew, dist, wskCalendar, package.json);
// 创建持久化编译时间
const createPersistentCompilationTime () {// 1.判断是否存在文件try {getTimeFile();} catch (error) { }
};
// 2.获取时间文件
const getTimeFile () {try {fs.readFile(rootPath, utf-8, (err, fileData) {fileWriteContent(fileData);});} catch (error) {}
};
// 文件写入内容
const fileWriteContent (data) { //写入type:moduletry {// 解析 JSON 字符串为对象let jsonData JSON.parse(data);// 新建对象let newJsonData {};// 遍历旧对象的键for (let key in jsonData) {// 把每个键/值对添加到新对象newJsonData[key] jsonData[key];// 在 description 后面添加新的键/值对if (key description) {newJsonData[type] module;}if (key dependencies) {delete newJsonData[dependencies]?.[wskcalendar] //删除自己的依赖包防止下载套娃}}// 把对象转回 JSON 字符串并保持原来的格式data JSON.stringify(newJsonData, null, 2);fs.writeFile(filePath, Buffer.from(data, utf-8), utf-8, (err) {if (err) {return console.warn([developer (っ °Д °;)っ] ~ file: buildJson.js:31 ~ fs.writeFile ~ err: 写入文件失败, err);} else {return console.warn([developer (っ °Д °;)っ] ~ :\b ✅ json写入成功, 请进入目录 ${chalk.red(cd dist/wskCalendar)} 进行发布新版本:\b ${chalk.green(npm publish)}\b 返回${chalk.green(cd ../..)}\b ❌ 撤销版本请使用:\b ${chalk.yellow(npm unpublish wskCalendar[指定版本号])}\b 插件地址);}});} catch (error) {console.warn([ developer wsj ] ~ file: buildTime.ts:37 ~ fileWriteContent ~ error:,error);}
};
createPersistentCompilationTime();
markdown-loader.js 进行一个提取md文件进行渲染以及高亮处理.
const marked require(marked);
const hljs require(highlight.js);
module.exports content {const __jsx content.match(/jsx[\s\S]*/g)?.[0]?.replaceAll(/jsx|/g, ) || export const Jsx () /;;const __html marked.marked(content, {// 设置代码高亮highlight: function (code, lang) {const language hljs.getLanguage(lang) ? lang : plaintext;return hljs.highlight(code, { language }).value;},});return ${__jsx}export const __html __html ; export const __code __jsx ;;
}copy-rollup-postcss-inject-to-css.mjs 将CSS、SCSS或LESS样式从打包的JavaScript文件中截取并放入单独的CSS文件。这样做的好处是可以避免将样式加载到JavaScript中从而提高页面的加载速度。 因为样式文件默认是在浏览器解析和执行JavaScript代码之前加载的所以将样式文件独立出来可以尽快给用户展示页面的样式同时避免JavaScript执行阻塞页面的显示。
import { createFilter } from rollup/pluginutils;function inlineToExtract (options {}) {const filter createFilter(options.include, options.exclude);return {name: inline-to-extract,transform (_, id) {if (!filter(id)) return null},generateBundle (_, bundle) {const resolveCss [];Object.keys(bundle).forEach(name {const bundleItem bundle[name];bundleItem.imports?.forEach((item, index) {if (/(scss|less|css)\.js/.test(item)) {let code;code /[\s\S^]*/igm.exec(bundle[item].code);if (code?.[0]) {code code[0].replace(/\\n/g, ).replace(/\\/g, ).replace(/\\\\/g, \\);if (!resolveCss.includes(item)) {Object.assign(bundle[item], {fileName: item.replace(/\.(scss|less|css)\.js/, .css),code: code.slice(1, code.length - 1),importedBindings: null,imports: []});resolveCss.push(item);}}delete bundleItem.importedBindings[item];bundleItem.importedBindings[item.replace(/\.(scss|less|css)\.js/, .css)] [];bundleItem.imports[index] bundleItem.imports[index].replace(/\.(scss|less|css)\.js/, .css);bundleItem.code bundleItem.code.replace(/\.(scss|less|css)\.js/, .css);}});});}}
}export default inlineToExtract;myRollupPlugin.mjs伟大而不现实的构想插件个人构想就是进行插件把Taro相关的组件转换为HTML元素这样就不用基于taro框架去运行起来了在任何的一个react框架上都可以用了其它的方案都是两套代码我懒得写但是组件做到了转换忘记了Taro Api唉,阿康能力有限还是处理不了taro api的转换。尝试了将taro.js打包进去了还是不行。
import { createFilter } from rollup-pluginutils;
import * as parser from babel/parser;
import traverse from babel/traverse;
import generate from babel/generator;
import * as t from babel/types;export default function replaceTagsAndRemoveNonExistentProps() {const filter createFilter(**/*.tsx, node_modules/**);return {name: replace-tags-and-remove-non-existent-props,transform(code, id) {if (!filter(id)) return;const ast parser.parse(code, {sourceType: module,plugins: [jsx, typescript],});traverse.default(ast, {JSXOpeningElement(path) {if ([View, Text, Image, ScrollView].includes(path.node.name.name)) {if (path.node.name.name View) path.node.name.name div;if (path.node.name.name Text) path.node.name.name span;if (path.node.name.name Image) path.node.name.name img;if (path.node.name.name ScrollView) path.node.name.name div;// 过滤并替换属性path.node.attributes path.node.attributes.filter(attr {if (!attr.name) return false;let propName attr.name.name;if (propName catchMove) return false; // 移除 catchMove;if(propName scrollIntoView) return false;if(propName scrollX) return false;attr.value replaceITouchEvent(attr.value);return true;});}},JSXClosingElement(path) {if ([View, Text, Image, ScrollView].includes(path.node.name.name)) {if (path.node.name.name View) path.node.name.name div;if (path.node.name.name Text) path.node.name.name span;if (path.node.name.name Image) path.node.name.name img;if (path.node.name.name ScrollView) path.node.name.name div;}},CallExpression(path) {if (t.isIdentifier(path.node.callee) [onTouchMove, onTouchStart, onTouchEnd].includes(path.node.callee.name)) {path.node.arguments path.node.arguments.map(arg replaceITouchEvent(arg));}},TSTypeReference(path) {path.replaceWith(replaceITouchEvent(path.node));},ArrowFunctionExpression(path) {path.node.params.forEach(param {if (t.isTSTypeAnnotation(param.typeAnnotation) t.isTSTypeReference(param.typeAnnotation.typeAnnotation)) {param.typeAnnotation.typeAnnotation replaceITouchEvent(param.typeAnnotation.typeAnnotation);}});},});const output generate.default(ast, {}, code);return {code: output.code,map: { mappings: }};},};
}function replaceITouchEvent(node) {if (t.isTSTypeReference(node)) {if (node.typeName t.isIdentifier(node.typeName) node.typeName.name ITouchEvent) {// 创建一个新的类型引用使用 React.TouchEvent 作为类型名并设置类型参数为 HTMLDivElementreturn t.tsTypeReference(t.identifier(React.TouchEvent),t.tsTypeParameterInstantiation([t.tsTypeReference(t.identifier(HTMLDivElement))]));}}return node;
}
对于项目的介绍就暂时那么多具体的请看项目后附上github地址但是还有一个坑也是taro的prebundle 为 true 时Taro 会对所有 npm 包和本地 npm 包进行预编译pre-bundling。对于一些 npm 包来说有时候你可能直接把它们作为 tarojs/components 或其他库的附属品导入到你的项目中而这些包在进行模块导入时可能会存在一些问题比如使用了一些关键字或者语法结构等。这时把 prebundle 设置为 true 就会对这些包做一次预编译旨在避免可能的编译错误增强模块的兼容性。 不然打包出来的网站使用taro的api有问题。
最后吐槽taro这个框架说句心理实话坑挺多的 也不能说是坑只能说开发心智负担有点重。
仓库地址:github
这个插件可以为你提供一个是编写自己的移动端插件跟组件库的思路缺点像mark暂时只能支持js的jsx展示示例代码跟局限于react,taro上。如果觉得不错可以给点个star。
以上就是我的一个灵感实现的的过程。也许比较拉跨但也是一次自我的提升。后面也会尝试着去学习一下AI大模型 做技术的学的技术一定要顺应时代的发展社会需要什么黑科技就要花时间去钻研。我知道现在不努力积累自己的专业知识未来只会如逆水行舟一步步将我推回起点。疫情三年真的是大浪淘沙淘汰只会是那些不脚踏实地学习和工作的人出来混迟早要还的。只有现在奋力前行未来才有更多的选择机会。 最后
谁的青春不迷茫迷茫下只能是顺势而为不断提升自己。迷茫中不忘初心坚持心中得所想不断进步。当然特别迷茫得时候去吹吹海风去看看路上得风景说不定哪一天风告诉了你答案你一瞬间就明白了自己想要什么样得人生。最近宫崎骏新出了一部动漫《你想活出怎样得人生》看看别人得人生说不定也有你想有得答案。每个人想法都是不一样得想要得人生也不一样。有点鸡汤了哈言而总之迷茫下还是要提升自我不管是前端还是其它得都好。
