Loading... > @author: 郭瑞峰 > @createTime: 2023/05/09 > @updateTime: 2023/05/09 本来该写react的，结果有东西耽搁了，耽搁就耽搁吧，就把那个东西拿出来写一些 (╬▔皿▔)╯ 因为是半吐槽，半技术，我就勾选了俩（~~其实是懒人日志太少了，进来充数~~） ## 起风之时，因果相连(起因) 项目组开发的集成系统（主）和平台系统（子）分别占用一个代码仓库，为了方便以后管理代码仓库，所以说就要把这平台系统（子）合并进集成系统（主）。 听起来很简单吧，就是多页面的项目管理思路，再加上集成系统（主）本身就是多页面管理，`C` + `V`一下就完成了大半部分。 理论很完美，但现实给了俩大逼斗(￣ε(#￣) ## 经溪落水，过桥断木，难国之路，熬己炼鹰(经过难熬) 大逼斗一：平台系统自身原因 平台系统（子）本身的规划有问题，初始规划其只是为了展示，没有任何实际用途，所以说开发时随心所欲。 什么`sass`、`less`、`stylus` 混用，什么`eslint`没有，什么杂七杂八的依赖都有，甚至还有`script`标签嵌入依赖，更别说一个组件六七百行的“小”事儿了。 ### css预编译器重构 系统（子）没有实现预编译统一，现在就得重构这些css文件 ~~想死の心都有了~~ **设置目标预编译器 -> less** 有了目标就行动 传统的 `sass` 转化成 `less`只需要改一改文件尾缀就可以了，再把一些`sass`对应的函数改成`less`对应的函数就行了，最多就是把循环写成递归（下图为示例） ```sass @for $i from 1 through 20 { &:nth-child(#{$i}) { margin-left: #{$i * 8-8}px; } } ``` ```less .loop (@i) when (@i <= 20) { .loop(@i + 1); &:nth-child(@{i}) { margin-left: @i * 8 - 8px; } } ``` 而 `stylus` 重构就一言难尽了，你们看看示例吧 ```stylus body font: 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius: 5px -moz-border-radius: 5px border-radius: 5px ``` 没错，没有`{`,`}`,`;`，像`python`一样依靠缩进进行**域**划分 ಥ_ಥ 对了，还要`less`版本问题，比如说低版本不支持补全 `rgba(5,24,84)` ### webpack相关的兼容 * 兼容一：webpack版本兼容 你绝对猜不到我说的兼容是啥，是**高版本降级兼容低版本** (T_T) 集成系统（主）webpack版本为`v2`，平台系统（子）webpack版本为`v4` ``` -不对啊，webpack只是架构，不会影响页面逻辑啊 --是的，但是它会影响你的路径查询 ``` 举个例子 ```js // MyComponent at `../../components/MyComponent/index.vue` import MyComponent from '../../components/MyComponent' ``` `webpack 4`能直接识别并引入`index.vue`，但是`webpack 2`就无法识别`index.vue`，必须把文件路径补充全才能识别(`js`不受影响。~~格温不受影响~~) 所以说我就要把所有缺失`index`的组件全部补齐。 ～( TロT)σ * 兼容二：入口`html`兼容 鬼知道为啥有些依赖通过`script`标签引入，用`npm`包管理它不香么？ 这样子就只有对平台系统（子）`html`文件进行单独处理，也就是说修改build里面的配置(下面举个例子) (* ￣︿￣) ```js // 每个单页面的配置 p = { // 框架生成页面配置 // -- entry 入口路径 // -- title 输出页面title // -- filename 输出页面路径／文件名 entry: 'helloWorld', title: '你好世界', outpath: 'helloWorld/', filename: 'index.html', template: resolve(__dirname, 'index.html'), cdn: {} appName: 'helloWorld' } ``` ```js // 打包地方，其他dev、prod就直接再plugins里面循环生成HtmlWebpackPlugin // build/webpack.base.conf.js exports.templates = function() { var isDev = process.env.NODE_ENV === 'development' // Apps是所有页面的打包配置 return Apps.map(p => { return { title: p.title, filename: p.outpath + p.filename, dev: isDev, // 对html其进行判断，判断是用模板还是调用自己的 template: p.template || path.resolve(__dirname, '../index.template'), chunks: ['vendor', 'manifest','commons', p.entry] } }) } ``` # 疲于CV，备感心酸，不愿如此，堪以告慰(疲惫不堪) 项目合并了4天，通过了本地运行、Jenkins自动部署、UI和产品视察，算是合并成功了 人是累的，但还好只是人累 最后不得不吐槽：**妈耶，我要是知道这个系统（子）这么难受，打死都会拒绝项目合并。** (╯‵□′)╯︵┻━┻  最后修改：2024 年 11 月 27 日 © 允许规范转载 赞 1 如果觉得我的文章对你有用，请随意赞赏