I have seen a term called “front-end empowerment “, which may be a little pretentious, but in my understanding, it is to build wheels, build some wheels that help you. I think this is a way to get rid of bricks.

Decouple the module

One of the things I’ve been working on a lot lately with webApp is an H5 page based on hybrid development. It’s a one-to-many product with a lot of manual typing. For example, when we use adjust. Adjust, token and Event key are required. Token is the ID of the app, and key is the ID of the corresponding event. In the past, I saved the APP token and event key in a file and referenced them where needed. For example:

'My App Name': {appToken:'xxxxx'.event1:'yyyy'
}
Copy the code

When using this, I just need to call the name of my own app. If it does not exist, I will not record the event.

But there is a problem with this. Every time I need to add an app, I need to repackage and upload it, which is very troublesome, and I have the idea of decoupling.

However, although the token and key are not sensitive information, they should not be exposed. If someone obtains these two data to record events, event records may not be prepared. So, naturally, encryption came to mind.

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' / / encryption key, feel free to set up the function encryptString () {let STR = "for (keys) in const k {const obj = keys [k] STR + = ${k} | ` ` + `${obj.appToken}|`+ `${obj.event1}|` } const willEncrypt = utf8.parse(str) let encrypted = AES.encrypt(willEncrypt,encryptKey) encrypted = encrypted.toString() }Copy the code

After the encryption is completed, is it necessary to copy again, that is also called a programmer? So, add a write file

function writeFile(str){ const filePath = path.join(__dirname,'./dist','./js','./events.js') try { Fs.writefilesync (filePath, 'window.keyofadjust ='${STR}' ') console.log(' write file successfully ')} catch (error) {console.log(' write file failed ') console.log(error) } if(process.env.NODE_ENV==='development'){ process.exit(0) } }Copy the code

In this way, you only need to encrypt and write the configuration file again every time you modify it. For convenience, add an NPM command to package.json. After each update, you only need to run the command once to automatically encrypt and write.

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

Since this file is automatically written to the dist folder, you only need to update this JS every time you update it, instead of repackaging it, making it instantly easier. Of course, it also needs to be introduced in index.html.

<head>
	<script src="/js/events.js"></script>
</head>
Copy the code

You just need to decrypt it in the project

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
}
Copy the code

You need to be a little lazier

I was wondering if it was possible to automatically encrypt the update after wrapping it up. At that time, I looked through the webpack documentation and found a done hook. The basic method is as follows.

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

So I wrote a Webpack plugin called Webpack-after-done.

To use it, you just need to new the plugin

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

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

Also, for every deployment that needs to be compressed into a ZIP, I wrote a plug-in called Webpack-auto-zip for automatic compression.

feeling

How to get rid of bricks? It’s a false proposition, you think of yourself as a brick remover, what you are doing is moving bricks, if you think of yourself as an engineer, then you are designing and creating. For a programmer, we should do some of their own interest, and at the same time can be applied to the work, isn’t it beautiful?