Scene:
- According to the needs of the product, the application needs to play a variety of mask packages (change the icon name) and channel packages (the same package has different channels), as many as hundreds of package names also need to be named according to the channel, version, name after encryption.
- Packaging process: you need to change the image, channel ID, name, version number, then run the packaging command, wait three or four minutes to compile the package, and then change the encrypted package name
Imagine, hundreds of bags, waiting there, one by one…
Bulk packaging principle:
Here, the resource images that need to be packaged are put in a folder with a unified naming standard, and then nodeJS is used to read the file to know which sock puppet packages need to be typed. Then nodeJS is used to read and replace the images, calculate the encrypted package name, read and change the configuration file, and finally run the packaging command. This may not be obvious, but here is the code:
Create the channelmrd.js file as follows:
- Import the FS module and read the directory to determine the package to be typed. All image resources to be packaged are placed in the folder resourcesImage. And filter out garbage files to prevent the following traversal process error
const fs = require('fs'); const { mkdirpSync } = require('fs-extra'); const execSync = require('child_process').execSync; const images = fs.readdirSync('./resourcesImage').filter(item => item ! = '.DS_StoCopy the code- Iterate over images
images.forEach(async (f, i) => {
...
});
Copy the code- In the traversal process to replace the image, use the FS module to replace the image resources under resourcesImage to the corresponding project image location.
fs.copyFileSync(`./resourcesImage/${f}/${f}.ico`, `./resources/${f}/favicon.ico`); fs.copyFileSync( `./resourcesImage/${f}/${f}.ico`, `./resources/${f}/favicon-256.ico` ); fs.copyFileSync(`./resourcesImage/${f}/${f}.png`, `./resources/${f}/logo.png`); // Replace application, dock, MAC icon fs.copyfilesync ('./resourcesImage/${f}/icon_512.png ', './icon.png '); fs.copyFileSync(`./resourcesImage/${f}/favicon_16.png`, `./script/favicon.png`); fs.copyFileSync(`./resourcesImage/${f}/favicon2_64.png`, `./script/favicon2.png`); fs.copyFileSync(`./resourcesImage/${f}/favicon2_64.png`, `./src/assets/icons/logo1024.png`); fs.copyFileSync(`./resourcesImage/${f}/favicon2_64.png`, `./src/assets/icons/logo.png`); fs.copyFileSync(`./resourcesImage/${f}/favicon2_64.png`, `./script/logo/favicon.png`);Copy the code- Set up the configuration file. First you need to know how much to set: resourcesImage name according to the requirements of the Mosaic, here you can read directly
Const [channel, folderName, shortcutName, version = '4.0.1',] = f.split('-');Copy the code- Get the configuration, then set the configuration file. Here, the code to set the configuration file is placed in the newly created channelprocess. js file. Run the script through the child_process module
execSync(
`node ./channelProcess.js ${folderName} ${shortcutName} ${channel} ${f} ${version} ${channel_type}`
);
Copy the code- To enter channelprocess.js, the first step is to get the configuration information passed in:
const fs = require('fs'); const argv = process.argv; const name = argv[2]; const shortcutName = argv[3]; const channel = argv[4]; const fileName = argv[5]; Const version = argv [6] | | '1.0.0'; const channel_type = argv[7];Copy the code- First, modify package.json configuration
Read package.json and modify configuration information: name, version number, package name, ID, etc
const readWriteFile = path => { fs.readFile(path, function (err, data) { if (err) { console.log(`read [${path}] error`); } else { const jsonData = JSON.parse(data.toString()); // Read package.json content const stringData = json.stringify (changeData(jsonData)); // Modified package.json content writeFile(path, stringData); // write package.json}}); }; readWriteFile('./package.json');Copy the codeChangeData: Modifies the name, version, and ID
const changeData = data => { data.name = name + `-mac` + `-c${channel}`; data.version = version; data.description = name + `-mac` + `-c${channel}`; data.build.appId = name + `-c${channel}` + `-mac`; data.build.productName = shortcutName; // Application desktop name (MAC) data.build.artifactName = artifactName + '.${ext}'; // '${productName}-${version}' + `-c${channel}` + '.${ext}'; data.build.nsis.shortcutName = shortcutName; data.build.directories = { output: `dist/c${channel}-${channel_type}` } return data; };Copy the codeArtifactName is the final name encrypted by MD5
Const md5 = require('md5') // function hex2int(hex) {var len = hex. Length, a = new Array(len), code; for (var i = 0; i < len; i++) { code = hex.charCodeAt(i); if (48 <= code && code < 58) { code -= 48; } else { code = (code & 0xdf) - 65 + 10; } a[i] = code; } return a.reduce(function (acc, c) { acc = 16 * acc + c; return acc; }, 0); } function clickMD5 (version, channel, channel_type){ const value = `v${version}_c${channel}_${channel_type}_mac_ltz` return "app_" + Value. The substring (0, the value. The length - 3) + hex2int (md5 (value). The substring (4, 8)); } // Get the final name const artifactName = clickMD5 (version, channel, channel_type)Copy the codeWriteFile: writes to the file package layer
const writeFile = (path, data) => { try { fs.writeFile( path, data, { encoding: 'utf8', }, err => { if (err) throw err; console.log(`-- write [${path}] set success`); }); } catch (error) { console.log(`write [${path}] error: `, error); }};Copy the code- Modifying other configurations is the same, or even easier, by overwriting writes
/public/preload.js const publicPreloadText =' window.channelName='${shortcutName}'; window.EXTEND_SOURCE='c${channel}'; `; writeFile('./public/preload.js', publicPreloadText); /script/preset. Js const scriptPresetText =' const channelName='${shortcutName}'; /script/preset. module.exports={channelName}; `; writeFile('./script/preset.js', scriptPresetText); // SRC /utils/config.js const configText = 'const PLATFORM = '4'; const CHANNEL_TYPE = '${channel_type}'; const VERSION = '${version}'; const PACKAGE = '${name}'; const EXTEND_SOURCE = '${channel}'; export{PLATFORM, CHANNEL_TYPE, VERSION,PACKAGE,EXTEND_SOURCE}`; writeFile('./src/utils/config.js', configText);Copy the code- At this point, the configuration file changes are complete. Go back to the channelmrd.js file for the traversal operation, and after you’ve changed the configuration, it’s time to pack. ExecSync (‘ YARN edist’) was executed directly and the file was lost. I added the {stdio: ‘inherit’} configuration to view the console output
execSync('yarn edist', {stdio: 'inherit'});
Copy the code- In addition, there are different channel packages under the same vest package. Here channels are relatively simple, just 1, 2, 3, go through 123 and perform Step 5 and Step 9
// let channel_type = 1 while (channel_type <= 3) {execSync(' node./ channelprocess.js' ${folderName} ${shortcutName} ${channel} ${f} ${version} ${channel_type}` ); execSync('yarn edist', {stdio: 'inherit'}); channel_type++ }Copy the code- Bulk packaging command: add in script of package.json
"dist:all": "node ./channelMRD.js"
Copy the codeRun YARN dist:all and wait to pack
Summary: While the process may seem tedious, it’s just reading and writing files using the NODEJS fs module and running commands using the child_process execSync module