What is front-end engineering?

  • With the increasing complexity and diversification of services, webPage mode is replaced with webApp mode, and a series of problems occur, such as how to effectively develop a multi-person team, how to improve development quality, and how to improve maintainability.
  • Front-end engineering is an important part of architecture, which is used to solve the above problems and study front-end engineering from the perspective of software engineering.

Front-end engineering factors

modular

Modular?

A large file can be divided into several interdependent small files, and then assembled and loaded in a unified manner, so that collaborative development can be carried out.

What are the types of modularity specifications?

JS modular
  • Modular specification for browser side: AMD, CMD
  • Modular specification on the server side: CommonJS specification
  • ES6 modular specification

1. How do I import/export by default?

Use export default {member name… } for default export

Use import receive name from “module identifier” for default import

2. How to import/export on demand?

export let num = 999; Export a member as needed

Import {num} from “./test.js”; Import members of other modules as needed

3. How to import and execute JS code directly?

import “./test.js”;

CSS modular
  • Although preprocessors such as Sass, Less, and Stylus implement file splitting of CSS, they do not solve an important problem of CSS modularity: global contamination of selectors. Logically, a modular file should hide the internal scope and expose only a few interfaces to the user. With current preprocessors, importing a CSS module risks overwriting existing styles. While rewriting styles is an advantage of CSS, it is not conducive to multi-player collaboration.
  • So I made some CSS naming styles
  1. BEM style
  2. The Bootstrap style
  3. Semantic UI style

From the tool level, the community has created three solutions: Shadow DOM, CSS in JS and CSS Modules.

  • Shadow DOM is the WebComponents standard. It will solve the global pollution problem, but many browsers are not compatible at the moment and are a long way off for us
  • CSS in JS is the complete abandonment of CSS, using JS or JSON to write styles. This approach is radical, doesn’t take advantage of existing CSS technologies, and can be difficult to deal with issues like pseudo classes
  • CSS Modules still use CSS, but let JS manage dependencies. It maximizes the combination of CSS ecology and JS modularity and is by far the best solution. Vue’s Scoped Style is another
Resource modularization

After resources are modular, there are three benefits:

  • Dependency simplification. The dependencies of all CSS and image resources follow the JS route. There is no extra need to deal with the dependency of CSS preprocessor, and there is no need to deal with the path problems of image merging and font image during code migration
  • Resource processing integration. Loaders can now be used to do various things with various resources, such as complex vue-loaders and so on.
  • Clear project structure.

componentization

  • Divide and conquer, divide and conquer
  • reuse

The canonical

  • Limit good habits

1. Establishment of directory structure 2. Coding specification 3. Git branch management 7.Com MIT Description Specification 8. Regular CodeReview 9. Visual icon specification…

automation

Repeat to the automated tool

The use of webpack

How do I install WebPack?

npm install --save-dev webpack
Copy the code

Since it is Webpack 4.0+, you also need to install WebPack-CLI.

npm install --save-dev webpack-cli
Copy the code

Global installation:

npm install --global webpack
Copy the code

How do I configure the entry and exit of webPack packaging

var path = require('path'); Module. exports = {mode: 'development', // mode producer is production entry: './foo.js', // output: {// export path: path.resolve(__dirname, 'dist'), filename: 'foo.bundle.js' } };Copy the code

Use loader to load CSS files

You can use loader to tell Webpack to load CSS files

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' }
        ]
      }
    ]
  }
};
Copy the code

Configure automatic packaging for WebPack

Configure the HTml-webpack-plugin and generate a preview page

  • HTML – webpack – the plugin installation
npm install --save-dev html-webpack-plugin
Copy the code
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      main: "./src/script/main.js",
	  a: "./src/script/a.js"
    },
plugins: [
  new HtmlWebpackPlugin({
   title: 'Output Management'
    })
 ],
    output: {
      filename: "[name]-[hash].bundle.js",
      path: path.resolve(__dirname, 'dist')
    }
  };
Copy the code

Thermal loading

Install webPack dev sever:

npm install webpack-dev-server --g
Copy the code

Run webpack-dev-server to get server localhost:8888, default path is./dist, open app. HTML or module.js in dist, then change the file in SRC, save it, it will automatically update the package and load the new page

module.exports = {
...
   devServer: {
       contentBase: path.resolve(__dirname, './dist'),
       host: 'localhost',
       compress: true,
       port: 8888,
       historyApiFallback: true,
   }
...
}


Copy the code