Develop scaffolding and encapsulate automated build workflows

Engineering overview

Engineering concept:

Front-end engineering is a means to improve efficiency and reduce costs through tools that comply with certain standards and specifications. <br /> Engineering is a conceptual idea, not a specific discipline or technology.Copy the code

Engineering factors:

Modularization, componentization, standardization and automation

1. Modularization: divide a large file into multiple modules and divide it according to each small module, which is beneficial to reuse and combination. Modularization is not equal to componentization. Modularization tends to divide the file resource layer, while componentization tends to divide the UI display layer, which improves the development efficiency and code reuse rate. 4, Automation: simple and repetitive work by tools (or procedures) to complete, can not only improve the development efficiency, but also reduce the probability of human factors errorCopy the code

Problems solved by engineering:

If you want to use the new features of ES6+, but there are compatibility issues; If you want to use Less/Sass/PostCSS to enhance the programmability of CSS, but the runtime environment can not directly support 2. You can't use modularity and componentization to improve the maintainability of the project. 3. The deployment process requires manually uploading the code to the server. 4. Unified code style, quality assurance. The quality of the code pulled back from the warehouse cannot be guaranteed. 5. When it relies on the back-end service interface to support the development of some functions, it needs to wait for the completion of the back-end service interface in advanceCopy the code

Engineering performance in a project

  • Create project: Create a unified project structure automatically
  • Coding: code style, check, build, package, compile
  • Preview sessions: native preview and hot update experience, source mapping, Web services
  • Code submission: Pre-submission reviews, including style and quality
  • Deployment: Automatic release, CI/CD

Engineering core

Tools are just the means to help land the overall plan or architecture of a project

Scaffolding tool

Common scaffolding tools

  • create-react-app
  • vue-cli
  • angular-cli
  • .

Yeoman

General purpose scaffolding tool

  • The installation
Yarn Global add Yo ## Install the corresponding generator yarn global add Generator-node ## Create the project directory mkdir my-module ## Go to the project directory CD my-module ## Run the Generator Yo node with yoCopy the code

Enter the information as prompted, the keywords being a comma-separated array

Sub Generator

  • Install command
yo node:cli
Copy the code
  • Execute command link
yarn link
Copy the code

  • Use the cli command that you have registered

    Here are a few questions:

    • Commands are likely to be repeated (default package name to start with), and it’s best to remember them well and not repeat them
    • It may appear on the Mac system when used after it is createdpermission deniedQuestions that need to be usedchmod u+x ./lib/cli.jsTo change permissions, the following path is the CLI command file path
    • Not all subsets have a CLI, so check to see if they do

Yeoman uses summary

  • 1. Know what you need
  • 2. Find a suitable Generator
  • Install the found Generator globally
  • 4. Run the Generator through Yo
  • 5. Use the command line to interactively fill in the options
  • 6. Generate the project structure you need

To generate web applications, you need to find them on the official website of Yeoman

At the same time, some C++ dependencies do not have image acceleration, you can set taobao image acceleration, such as node-sass

A custom Generator

Create your Generator module

Essentially create an Npm module

Requirements:

  • The Generator has its own basic structure
  • To find the module, the name must start with generator- followed by your own name

The specific process

  • Start by creating a directory that begins with Generator –
  • Initialize YARN in the directory
  • Install a base class package for Yeoman-Generator
  • Create a unique directory structure in the project
  • Write the following requirements in index.js
  • Register modules using yarn link
  • Finally, use yo sample (your own module name) in another project directory
// The core entry of the generator is inherited from the Yeoman generator // export // Use destinationPath to obtain the current project path at runtime and pass the file name // If multiple parameters are passed in, it means to create a directory, Const Generator = require('yeoman-generator'); Module.exports = class extends Generator {writing() {// This method is called during the file generation phase this.fs.write(). this.destinationPath('text.txt', 'text1.txt'), Math.random().toString() ) } }Copy the code

The template to create

  • Under generators-app, create a templates directory
  • Create files in the Templates directory
  • In the template file, you can use EJS syntax to dynamically output the content
  • Change the module method to the following:
Const TMPL = this.templatepath ('foo.txt'); Const output = this.destinationPath('foo.txt') const context = {title: 'Hello jiagui ', success: false }; this.fs.copyTpl(tmpl, output, context);Copy the code

Receive user input

Only last week, the Heavily-guarded heavily-guarded method is implemented, returning this. prompt internally. The heavily-guarded heavily-guarded method receives an array of parameters, with the object key being: Type -input, name- a key to the resulting data, message- if you want, default-appname, which is the default after the project is generated, then method, which takes the input

Making project

See: github.com/jiaguishan/…

Automated build

Common automated build tools

  • Grunt // Based on temporary files
  • Gulp // Memory based completion, simultaneous tasks
  • fis

Grunt

const done = this.async(); done(); done(false); / / failureCopy the code

gulp

See: github.com/jiaguishan/…