我的博客文章原址

本来该写react的，结果有东西耽搁了，耽搁就耽搁吧，就把那个东西拿出来写一些
(╬▔皿▔)╯

因为是半吐槽，半技术，我就勾选了俩（其实是懒人日志太少了，进来充数）

起风之时，因果相连(起因)

项目组开发的集成系统（主）和平台系统（子）分别占用一个代码仓库，为了方便以后管理代码仓库，所以说就要把这平台系统（子）合并进集成系统（主）。

听起来很简单吧，就是多页面的项目管理思路，再加上集成系统（主）本身就是多页面管理，C + V一下就完成了大半部分。
理论很完美，但现实给了俩大逼斗(￣ε(#￣)

经溪落水，过桥断木，难国之路，熬己炼鹰(经过难熬)

大逼斗一：平台系统自身原因

平台系统（子）本身的规划有问题，初始规划其只是为了展示，没有任何实际用途，所以说开发时随心所欲。
什么sass、less、stylus 混用，什么eslint没有，什么杂七杂八的依赖都有，甚至还有script标签嵌入依赖，更别说一个组件六七百行的“小”事儿了。

css预编译器重构

系统（子）没有实现预编译统一，现在就得重构这些css文件 想死の心都有了
设置目标预编译器 -> less

有了目标就行动
传统的 sass 转化成 less只需要改一改文件尾缀就可以了，再把一些sass对应的函数改成less对应的函数就行了，最多就是把循环写成递归（下图为示例）

@for $i from 1 through 20 {
  &:nth-child(#{$i}) {
    margin-left: #{$i * 8-8}px;
  }
}

.loop (@i) when (@i <= 20) {
  .loop(@i + 1);
  &:nth-child(@{i}) {
    margin-left: @i * 8 - 8px;
  }
}

而 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只是架构，不会影响页面逻辑啊
--是的，但是它会影响你的路径查询

举个例子

// 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里面的配置(下面举个例子)
(* ￣︿￣)

// 每个单页面的配置
p = {
  // 框架生成页面配置
  // -- entry 入口路径
  // -- title 输出页面title
  // -- filename 输出页面路径／文件名
  entry: 'helloWorld',
  title: '你好世界',
  outpath: 'helloWorld/',
  filename: 'index.html',
  template: resolve(__dirname, 'index.html'),
  cdn: {}
  appName: 'helloWorld'
}

// 打包地方，其他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和产品视察，算是合并成功了
人是累的，但还好只是人累

最后不得不吐槽：妈耶，我要是知道这个系统（子）这么难受，打死都会拒绝项目合并。
(╯‵□′)╯︵┻━┻