长夜漫漫，无心睡眠。心中所想，心中所感，忧愁当前，就执笔而下，写下这篇文章。
回忆过往
回想当初为啥学前端，走前端这条路，学校要求嘛，兴趣爱好嘛，还是为了钱。 时间带着我的回忆，回到了21年，也是我人生得转折点，那时候大学分班，直白点就是选择路线，因为我们是软件工程专业，所以软件方面都学习过，软件设计模式，数据结构，算法，计算机网咯，数据库，web程序设计，计算机组成原理，项目管理，等等科目，甚至硬件我们也有实操，示波器，焊接，组装板块都玩了一下。可以说学的很杂，软件工程专业得学生其实学得更多得都是偏后端得科目，像前端这种可能不入大学老师得眼，所以前端是没有专门的课程得。当时黑马也来我们学校合作过，带着我们写项目，后端java,微服务。最让我们印象深刻得是，他们培训毕业班工资情况，当时很惊讶，月薪一万，两三万都有。但是现在仔细想想那些都是外包公司，包装了几年工作经验进去的。是啊，当时，java后面，很高薪啊，而且上限总体要比前端高啊。大数据那时候也很火啊，甚至人工智能python也火。挺迷茫得，不仅是我，还有我的室友嘛。每个人得人生仿佛都在那时候决择了。 我也问了很多身边出去工作的人，建议都是选人工智能，大数据，这些比较吃香。不过我们还是很理智得，人工智能选不得，没有个研究生身份，选它很难找到工作，而且我们学校不出名。其实当我们问别人得时候，心里已经有个不确定得而想选择得答案 。对于我来说，大数据，跟后端，我都能玩，只是感觉比较枯燥，相比于前端，页面直接能看到，更加得吸引我的注意力，后端上限是高，但又有几个能达到月薪五万呢，我们更多得是平凡人，不是大牛。这就是我走了前端路线得答案，没那么枯燥，可视化。
迷茫当下
也许很多人转行过来得学前端，是因为IT得高薪工作，为啥不转后端呢，因为相对于后端，前端更好学点。这个不得不承认，我做兼职得时候，就遇到好多都是转行过来得，然后花钱请教问题解决得。所以就造成了人员很多过来一起卷，大环境得不行，很多公司都在裁员，加上AI得出现。所以会搞得人心惶惶。工作几年了，到了涨薪得年纪，公司还降薪，很多人都都说大环境不好，能苟着就苟着，面试机会也少。 所以现在很多公司裁高低招，你不干自然有的是人干，造成行业内卷加剧。 金三银四，我也投了试一下，面了几家公司，有一家公司让我印象很深刻，深刻在什么地方呢，他问了我很底层，js底层，问我js怎么来的，如果不用它得已有api，让你去判断它是什么类型，你怎么判断。当时我回答上了引用数据类型，可以用原型连得方式去判断。但是基本数据类型我就懵了，像0，好像用不了__prototo__吧，不过它确实有个API可以进行获取到它得原型对象，一生万物，万物皆对象，确实都可以用原型链来判断。 他问了我几个比较难得问题，最后我问他，你们公司是要搭建自己得框架嘛，还是做要插件，组件库。一问啥都没有，都在计划中，听了他的业务描述，纯纯的切图崽就能完成得东西，干嘛问这种问题。我是有点想不通得。我也面了一家，本来说是人事面得，然后面试得时候又加技术面，一直在问我解决方案，然后我问他，我看你一直不满意我的方案，你是有更好得方案嘛，能介绍一下嘛，然后他说的跟我前面差不多，总感觉是套我方案得感觉，然后就没然后了。还是面试一些中大型公司比较好，我回答不好的时候，他能很清楚得解答给我听。虽然没过，但也让我收获不少。
提升自我
这段时间，我也陷入了迷茫，到底想活出怎样的人生。 我也问过同事，他是怎么说的，我相信我的价值还是比人工智能要强的，大不了去摆地摊。是啊，与其自我焦虑，不如，有空的时候提升自己。哪怕出去玩，都比精神内耗强，谁知道明天是怎样的呢。还不如，静下来提升自我。在思考一番后，我的灵感来了。最近一直没写作，也不是说摆烂了。而是没有一个idea，自己要干嘛。想要干嘛。 因为之前做了两个公司的项目，跟同事写了六七款日历组件，所以就想能不能写一个日历库，因为都是移动端的，Taro开发的，网上没找到一个模板，公司也在弄移动端组件库，刚好我也参与其中，所以我也能一边学习 ，一边弄个自己的作品。所以我就自己搭建一个。
总体设计
构想
搭建框架 => 构建总体目录 => 编写组件 => 组件测试 => 打包发布 => 网站展示 =>网站设计，网站展示，mark展示代码，代码高亮复制，例子渲染，锚点展示，接口文档，兼容打包发布 => 进行部署。
当时我的构思是这样的，当时组件的打包，跟网站还是不一样的。所以我就考虑从vite，webpack,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的一个坑。移除自己的插件避免下载依赖进行了套娃处理。
bash
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:module
try {
// 解析 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，文件进行渲染，以及高亮处理.
bash
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执行阻塞页面的显示。
bash
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打包进去了还是不行。
bash
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` 作为类型名，并设置类型参数为 `HTMLDivElement`
return 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大模型
做技术的学的技术一定要顺应时代的发展，社会需要什么黑科技，就要花时间去钻研。我知道现在不努力积累自己的专业知识，未来只会如逆水行舟，一步步将我推回起点。疫情三年真的是大浪淘沙，淘汰只会是那些不脚踏实地学习和工作的人，出来混迟早要还的。只有现在奋力前行，未来才有更多的选择机会。
最后
谁的青春不迷茫，迷茫下只能是顺势而为，不断提升自己。迷茫中不忘初心，坚持心中得所想，不断进步。当然特别迷茫得时候，去吹吹海风，去看看路上得风景，说不定哪一天风告诉了你答案，你一瞬间就明白了自己想要什么样得人生。最近宫崎骏，新出了一部动漫《你想活出怎样得人生》看看别人得人生，说不定也有你想有得答案。每个人想法都是不一样得，想要得人生也不一样。有点鸡汤了哈，言而总之，迷茫下还是要提升自我，不管是前端，还是其它得都好。