preface

In daily requirements development, there will always be some repetitive manual work. Do you accept the repetitive work or do you take the initiative to improve the situation? I believe that as a front-end developer with a strict commitment to efficiency, I would definitely choose the latter! But an idea needs to be implemented step by step from discovery to landing. Recently, I just developed an automated publishing tool. Let’s talk about the process and the gains!

Demand gathering survey

The status quo

At present, our group is mainly engaged in marketing and promotion activities. After the skin of these activities is developed and packaged, according to the development specifications, developers need to copy the packaged source code of the activity to the company’s management background publishing platform, and then select a series of business configurations to achieve the release of the skin. As soon as the business code changes, it needs to be repackaged and copied to cover the previous version of the source code, and it needs to make sure that it is not pasted onto another skin. While this approach increases the time it takes to create skins by manually copying the source code, it does not avoid distribution problems caused by manual errors.

Group a classmate online every two days will be to develop a skin, and from development to online, at least after about 8 to 10 times of code change operation, copy and paste operations took an average of 15 s each time, if the time saved, the development of a skin can save 2 minutes of time, more important is to avoid the manual release error problem.

The target

Through the automatic publishing tool, the developer can directly select the publishing skin needed by the developer, enter some configuration information of the skin through interaction, and realize the platform publishing in different environments according to the parameters. When it comes to skin updates, you just need to repackage and regenerate a new source code, and the tool simply chooses to merge the latest source code updates to the platform, truly realizing automatic distribution. Our tool is primarily automated for step 2 of the above flowchart.

The development of

To implement this tool development, several issues need to be addressed:

1. Because the interface released by the platform requires user login information, which needs to be carried and put on the request head for legitimate user verification, how to obtain the browser user login cookie information in the Node environment?
2. How can it be adapted and connected to other projects in the group?
3. How to design command-line interaction to provide users with diversified configuration choices?
4. How do YOU implement the imperative invocation tool?

In view of the above problems, to do the analysis of certification.

The Node environment gets the cookie from the browser

The idea is to create an HTTP server through HTTP package, listening to a fixed port, and then open the target management background page address through the open package, of course, the premise is to ensure that the user has logged in successfully in advance, through the httpServer request header can get the page login cookie information. Then cache a copy in a local file and read it directly next time.

How to create an httpServer service? The code looks like this:

const server = http.createServer((req, res) = > {
  res.setHeader('Access-Control-Allow-Origin'.The '*') // Set cross-domain exemption
  res.setHeader('Access-Control-Allow-Methods'.The '*')
  if (req.url) {
    process.env.SSP_COOKIE = (decodeURIComponent(parse(req.url.split('? ') [1]).cookie)) // Assign the obtained cookie to the global environment variable for easy invocation elsewhere
  }
  res.end('ok')
})
server.listen(port, () = > { // Listen on the service port and call back to open the target page
    open(url, { background: true})})Copy the code

Among them the req. Url. Split (‘? ‘)[1]). Cookie is a local cookie sent by the target page. After obtaining the cookie, it is assigned to a global environment variable to facilitate the subsequent call of the request.

Tool suitability

At present, this tool is mainly developed to improve the skin development of marketing activities within the group. How can it be applied to other different engineering projects? As a saying goes, all differentiation problems can be solved through customized configuration. When applied to this tool, it is necessary to add a customized release configuration file suitable for this project, and the tool can read this configuration information to achieve horizontal adaptation.

By default, the tool requires users to add a global publish configuration file in the project root directory: deploy.config.js

module.exports = {
  entry: 'example/pages/**/index.vue'.dist: 'dist'.deployName: 'deploy.json'.defType: 2.dataConfig: {}}Copy the code

For example, entry is the path of the active skin source code that needs to be packaged under the project. According to this entry, you can find the target file. Dist is the name of the active skin source folder after packaging, etc. This makes it possible to adapt the use of different project directory structures and packaging methods.

Command line interaction

The publishing of skin code must require some specific custom configuration of skin publishing, such as unique identification of skin, name, configuration switch on state, etc. These require users to manually input interactive information, and this interactive tool is generally implemented by Inquirer:

const answer = await inquirer.prompt([
    {
      name: 'activityTemplateType'.message: 'Select skin subtype'.type: 'list'.choices: data.map(item= > item.name)
    },
    {
      name: 'skinName'.message: 'Enter a skin name'.type: 'input'
    },
    {
      name: 'skinType'.message: 'Enter skin unique identifier (unchangeable)'.type: 'input'}])Copy the code

The final display looks like this:

Terminal imperative invocation tool

There is a bin field in the package.json file of NPM, which is mainly used to synchronize the corresponding script commands to the path variables of the project during the initial installation of the NPM package, as shown in the following figure:

{
    "bin": {
        "tuia-deploy": "bin/main"}}Copy the code

Tuia-deploy is the name of the command that can be invoked directly, and bin/main is the path to the execution file.

#! /usr/bin/env node // ** require('.. /lib/main')
Copy the code

Use the COMMANDER package to create an interactive command:

import { createCommand } from 'commander'

const program = createCommand()
// Register the command
program
    .option('--env <string>'.'environment: the test/pre/prod'.'test')
Copy the code

Call method:

tuia-deploy --env test
Copy the code

After the above problem is solved, the basic function can be completed, after the completion of the local self-test, you can directly send packages, wow, perfect ~

Promotion and optimization

Does it end when the tool is built?

Of course not, after it is made, it needs to be applied to the actual project. At the same time, according to some problems exposed by users in the process of real use, optimization and iteration on the use experience can be better and better!

At the same time, a good tool must be well documented to attract more users. Writing your README well is key. The general structure should contain the following:

1, tool introduction 2, use method and notes 3, the way to contribute source code description 4, thank and hope users to mention the issue 5, open source agreementCopy the code

conclusion

Although it is just a small tool, it really needs continuous thinking and summary from problem discovery, tool development to implementation, which tests the practice and coordination ability of developers. In terms of finding problems, I think we can mock interface data in the development stage, test requirements automation, release automation, codeReview of code, and even build low code platform, not only to pursue our KPI indicators, but also to hope that our output can help improve the efficiency of the team. So where do you find the problem?

From now on, more than jump out of the existing way of thinking and development, see more and find problems, and try to solve problems, improve the efficiency of development, personal growth is very helpful, with you!