最近写代码的感悟，如何摆脱搬砖

曾经看过一个词，叫"前端赋能",这个词可能有点装逼，但是在我理解，就是造轮子，造一些对自己有帮助的轮子。我觉得这是一个摆脱板砖的方法。

打点模块的解耦

我最近常做webApp的是一个基于混合开发的h5页面，它是一个一对多的产品，里面有很多地方需要手动打点。例如我们常用的adjust.adjust打点时需要token和event key，token相当于这个app的id,key就是对应事件的id.在最之前，我都是将app token和event key，保存到一个文件中，然后在需要的地方引用。例如这样：

'My App Name':{
	appToken:'xxxxx',
	event1:'yyyy'
}

这样使用的时候，只需要按照我自己的app的名字去取就行了，如果不存在就不记录事件。

但是这样有一个问题，每次当我需要新增一个app的时候，就需要重新打包上传，这样很麻烦，我产生了解耦的想法。

但是这个token和key虽不算什么敏感信息，但是也不能随便暴露，如果有人拿到这两个数据就可以记录事件，可能会导致事件记录不准备。因此，自然而然的想到了加密。

const keys = require('./adjustKeys.config')
const AES = require("crypto-js/aes")
const utf8 = require('crypto-js/enc-utf8')
const path = require('path')
const fs = require('fs')
const encryptKey = 'test' //加密key,可以随便设置

function encryptString(){
let str = ''
  for(const k in keys){
    const obj = keys[k]
    str+=`${k}|`+
    `${obj.appToken}|`+
    `${obj.event1}|`
}
 const willEncrypt  = utf8.parse(str)
 let encrypted = AES.encrypt(willEncrypt,encryptKey) 
 encrypted = encrypted.toString()
}

加密完成后，难道还需要自己复制一遍吗，那还叫程序员？于是，加上一个写入文件

function writeFile(str){
  const filePath = path.join(__dirname,'./dist','./js','./events.js')
  try {
    fs.writeFileSync(filePath,`window.keyOfAdjust='${str}'`)
    console.log('写入文件成功')
  } catch (error) {
    console.log('写入文件出错')
    console.log(error)
  }
  if(process.env.NODE_ENV==='development'){
    process.exit(0)
  }
}

这样每次修改配置文件的时候，只需要重新加密写入一次即可。为了方便，在package.json里添加一个npm 命令，每次更新完成后，只需要运行一次命令就可以自动加密并写入了。

"scripts":{
"adjust": "cross-env NODE_ENV=development node encryptAdjustKey.js"
}

由于这个文件是自动写入dist文件夹中的，每次更新也只需要更新这一个js即可，而不需要重新打包，瞬间感觉方便了许多。当然在index.html中也需要提前引入。

<head>
	<script src="/js/events.js"></script>
</head>

在项目里只需要解密一下

import AES from "crypto-js/aes"
import utf8 from 'crypto-js/enc-utf8'

export function getAdjustKeys(){
  const a = 'default||,'
  const str = window.keyOfAdjust || a
  const keys = AES.decrypt(str,config.productId).toString(utf8)
  // console.log('getAdjustKeys keys: ', keys);
  return keys
}

还需要更懒一点

每次更新都输命令还是略显麻烦，我在想能否打包完自动去加密去更新，这时候我翻了一下webpack的文档，找到了一个done的钩子。基本方法如下。

module.exports = class done {
	apply(compiler) {
		compiler.hooks.done.tap('done', () => {})
	}
}

于是我就这样写了一个webpack插件，名字叫webpack-after-done.

使用的时候只需要把这个插件new一下即可

const AfterDone = require('webpack-after-done')

config.plugins.push(new AfterDone({
        funcList:doneCallbacks,
        zipify:true,
        zipFileName:'dist.zip'
      }))

同样的，对于每次部署都需要压缩成zip，我也写了一个自动压缩的插件webpack-auto-zip.

感悟

怎么摆脱搬砖？其实是个伪命题，你把自己当成搬砖的，你当前干的就是搬砖，如果你把你当成工程师，那么你就是在设计和创造。对于一个程序员，我们应该干一些自己有兴趣的，同时又能应用的工作中来，岂不美哉？