我的博客文章原址

本来该写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和产品观察，算是兼并成功了
人是累的，但还好仅仅人累

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