一个想法的开始
人生总会经历各种起伏， 职业瓶颈期，惨淡的就业环境，焦虑感笼罩着我。 很显然现在进入了一个低谷期，但也不全然是坏消息，通常在这种时候，我们会拥有较多的时间，那么如何使用这些时间就是现在的问题。
一个想法蹦了出来，写个开源项目 ！ 反复思考，百利而无一害。
- 能磨砺自己的个人技能， 编码能力。
- 写一些博客相关的内容， 塑造个人IP。
- 可能还有一些额外的打赏收入，何乐而不为？
- 付费支持。
基友听完之后，看着我神游天外的样子，忍不住推了推我，“天还没黑呢，还不到睡觉的时候”
“好， 我决定了，我要做一个开源项目，要做一个最棒的开源项目。”
为什么选思维导图？
对于一个从来没有参与过开源的小白来说，这可真的是一个难题呀，不过目标还是很快锁定了，思维导图。
- 做过相关项目，对于内容设计非常了解，并且有很多未实践的想法希望得到满足
- 目前 github 上没有较好的思维导图开源项目
- 基本每一个富文本编辑器都有一个思维导图，无论是 word 类型的(例如 语雀), ppt 类型的(wps)， 都存在这方面的需求，反过来说，任意一个内容平台，其实都存在类似需求。那么还是存在一定受众的。
- Xmind 纯粹的工具也能做到盈利, 俺也想贴贴
最后我想说一句：＂我要做最好的思维导图项目 ！！！＂ 求上而得其中，求中而得其下
写怎样的 blog ？
作为工具库, 工具的使用场景限制了受众, 文章的特定内容也会让很多人兴趣缺缺。 对于大多数人来说，没有这个库的需求，那么也就没有看相关文章的必要性。 思考一下，思维导图的实现确实是小众的需求，how to design? 这个问题应该是具备通用性的，关于问题的思考是无关于实际的特例，对所有人都应该会有所帮助和意义的。
文章的主题思路就已经有了大致的思路
创建项目
技术选型
vite 一把梭, 天下苦 webpack 久矣
直接 react + ts + sass 解决问题, 其实本身和渲染框架基本没有任何关系,选用 react + sass 仅仅是比较顺手而已
其他配置
- css 预处理器， vite 默认
- scoped css， 这里用的是 vue 的scoped css, 还发现了库的一个小问题
- lib 包导出配置
- ts 类型导出配置（没有类型会被骂的呀）
最后还是贴一下相关配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
// ts 类型导出
import dts from 'vite-plugin-dts'
import { resolve } from "path";
// scoped-css， css 隔离
import { reactScopedCssPlugin } from 'rollup-plugin-react-scoped-css'
// https://vitejs.dev/config/
export default defineConfig({
// 配置这个目录是为了后续方便写示例。
root: 'example',
plugins: [
react(),
dts({ rollupTypes: true }),
// TODO reactScopedCssPlugin ts error, 但是会正常工作
// reactScopedCssPlugin extend rollup.plugin, vitePlugin extend rollup.plugin
// reactScopedCssPlugin 应该 extend vitePlugin 才不会类型报错。 手动改了一下本地安装包
// 后续可能会去提个 issue
reactScopedCssPlugin({
styleFileSuffix: ''
}),
],
// vite 自动生成
css: {
preprocessorOptions: {
less: {
math: 'parens-division',
},
preprocessorOptions: {
scss: {
}
}
},
},
build:{
outDir: '../dist',
// 打包输出，暂时只需要 es, 也就是仅仅只能通过 import 使用， 不会吧不会吧，现在还有人不用脚手架呀
lib: {
entry: resolve(__dirname, "src/main.tsx"), // 打包的入口文件
formats: ['es'], //, 'cjs' , 'umd' , 'iife'
name: 'mindMap',
fileName: (format) => `mindMap.${format}.js` // 打包后的文件名
},
sourcemap: true, // 输出.map文件
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['react', 'react-dom'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
react: 'React',
}
}
}
}
})
github 先创建一个开源项目， 虽然内容非常少，不过也欢迎各路小伙伴 star 给予支持啦。 github 地址
npm 上也先偷偷注册一个库占坑。npm 地址
end
世人皆以成败论英雄，但对于人生而言。我更相信千里之行始于足下，万丈高台始于垒土。 须知滴水穿石，人心亦然。滴穿的洞不会消失，心中的积淀也磨灭不了。
2024冲冲冲
最后的最后，欢迎各路大佬点评，指正。 如果能给个点赞关注， 那就真的太感谢了。 (#^.^#)
