Package configuration

  • The script configuration
    • The NPM script command works as follows: the partial installation of modules will generate soft links in the node_modules/. Bin directory.
  • Distinguish dependencies from devDependencies
    • DevDependencies is used in the development environment to add build, ESLint, and unit test dependencies.
    • Dependencies are packaged in a production environment to add dependencies on framework, utils, and component business logic.

Webpack configuration (basis)

  • webpack-merge
    • A merge function is provided for the Merge Webpack configuration file.
  • entry
    • Single entry (single page file), multiple entry (multi-page file)
  • output
    • You only need to configure an output, and the different entries are distinguished by filename name
  • devServer
    • Write server configuration port and so on
  • plugins
    • Bundle optimization, environment variable injection, resource management (extending logic throughout the build process)
    • html-webpack-plugin.automatically generate index.html
    • clean-webpack-plugin. Empty the previous dist directory with each build
    • copy-webpack-pluginStatic resources in the project such as JS/CSS, fonts, etc. in the public directory are copied to dist
    • mini-css-extract-plugin. Generate an independent CSS file and pass<Link>Tags are imported into the CSS file
      1. Asynchronous loading
      2. No double compilation (better performance)
      3. Apply CSS
    • optimize-css-assets-webpack-plugin. Compress the CSS file
    • HotModuleReplacementPlugin. Hot update plug-in, development environment with devServer hot attribute is true
    • webpackbar. The progress bar during the build process
  • loaders
    • File types not supported by WebPack can be supported by adding loader to get valid modules and added to dependency graph (module converter, loader execution sequence, from right to left)
    • babel-loaderCompatible with earlier versions of JS
      1. Load on demand, @babel/preset-env already includes @babel/plugin-syntax-dynamic-import in the preset
    • style-loader/css-loader/postcss-loader/less-loader. Style file processing
      1. Note: When the production environment and the development environment use different loaders to process, whether the CSS priority is consistent (problems encountered in the project)
      2. less-loader —> postcss-loader —> css-loader —> style-loader. Less-laoder is the pre-processor, and PostCSS can be called the post-processor to increase the compatibility of CSS attributes
      3. Style – laoder.<style>Tag passing into CSS
    • url-loader/file-loader. Picture file processing.
      1. Where esModule is set to false, otherwise,<img src={require('XXX.jpg')} />There will be a<img src=[Module Object] />.
      2. Converting resources to Base64 can reduce the number of network requests. However, the data in Base64 is large. If too many resources are Base64, the load will be slow.
    • There are two ways to configure loader:
      1. The option property of the Use object is configured in the WebPack configuration file
      2. Create a configuration file for **-loader
  • devtool
    • Sourcemap. Maps compiled code to source code for debug
  • Resolve configuration

    • Modules Resolve configures how WebPack finds the file that corresponds to the module. Webpack built-in JavaScript modular grammar parsing function, the default will use the modular standard agreed rules to find, you can modify the default rules according to their own needs.

    • The alias configuration item maps the original import path to a new import path through an alias.

      1. The @hot-loader/react-dom configuration enables local refresh in the development environment

    • The extensions can default file suffixes. If the import statement does not contain file suffixes, it will automatically add the suffix configured in the Extensions to try to access the existing file. Therefore, put the suffix configured in the extensions in front of the file and make the array not too long to reduce the number of attempts. If extensions are not configured, only the appropriate JS file will be found by default

Webpack configuration (To optimize the)

  • Build optimization and compression optimization
  • plugins
    • speed-measure-webpack-pluginQuantified build data. You can measure the time spent by individual plug-ins and loaders
    • terser-webpack-pluginWebpack V5 comes with the latest terser-webpack-plugin, which enables multiple processes and caching by default. The terser cache file node_modules/.cache/terser-webpack-plugin can be seen in the project
  • loaders
    • cache-loaderCache loader. Add cache-loader before some performance overhead loaders to cache the results in disk. The default directory is node_modueles/. Cache /cache-loader.
    • thread-loaderMulti-process build. Loaders placed before other loaders will run in a separate worker pool after this loader. Loaders that run in the worker pool are limited. Each worker is an independent Node.js process, and its overhead is about 600ms. It also limits data exchange across processes. Use this loader only for time-consuming operations
      1. These loaders cannot generate new files
      2. These loaders cannot use custom Loader apis (that is, they cannot be customized through plug-ins)
      3. These loaders cannot get the webpack option Settings

Webpack5 new features

  • The entry of new grammar
    • Compared with split chunk, it is more logical to express, but the control of split chunk is more refined and can be selected according to business requirements
  • Module federal
    • Load the implementation of functions on demand, but with fewer configuration items and fewer application scenarios

Babel configuration

  • In the process of Babel translation, helper functions may be used for syntax processing and polyfill may be introduced for API processing. By default, Babel defines a helper for every place it needs to be used, resulting in a large number of duplicate helpers in the end product; Introducing polyfill directly modifies global variables and their prototypes, resulting in prototype contamination.
  • The plugin variable is used to support a function, and the presets variable is a collection of plugins
  • plugin
    • @babel/plugin-transform-runtime
      1. Instead of directly modifying the prototype, the API was introduced from a unified module, avoiding contamination of global variables and their prototypes
      2. Helpers have been changed from being defined in place to being included in a unified module, so that only one helper exists for each packaged result

Basic configuration of code format and style

  • Eslint configuration
    • throughnpx eslint --initThe command uses its own generator to configure the environment, code style, project framework type, TS, and so on
  • Resolve the conflict between ESLint and PrettierOfficial documentation including with Linters
    • Adding prettier at the end of the extends configuration disables a rule that conflicts the previous configuration

Ts configuration

  • tsconfig
    • Compilation entrance Is controlled by files, excludes, or excludes. Files support matching files,includes supports regular matching, and excludes files in includes.
    • Parsing rulesThe resolution rules for the moduleResolution configuration module are Classic and Node
      1. classic
        • Relative path module. The file is only looked up in the current directory without further parsing.
        • Non-relative path module. Start at the directory containing the imported files and work your way up, trying to locate matching. Ts and. D. ts files
      2. node
        • Relative path module. Json contains the main configuration file. If the main property is not configured, the file will be checked to see if there is index.ts or index.d.ts in the directory
        • Non-relative path module. Go directly to the node_modules directory of the import file, and then go up the node_modules directory
    • Extend the lookup of non-relative path modules
      1. baseUrl
        • If the module is not found in the above way, it is searched in the directory specified by baseUrl
      2. path
        • Used for path mapping when searching for baseUrl relative to the directory where baseUrl resides
  • eslint
  • Babel combined with TS
    • Add @ Babel/preset – typescript
    • Add ‘ts’ to resolve. Extensions array in Webpack configuration
    • When compiling with Babel, ts files are compiled as js files using various plugins. TSC is not involved in compiling, so tsconfig.json is not involved in compiling, but can have vscode prompt and import complete normally

The FTP server

  • vsftpd
    • Some simple Linux commands :systemctl command management service startup operations
    • Common query commands are as follows: The netstat command is used to display network information, such as network connections
    • In passive mode, the FTP server is enabled and sends port information to the client. The client connects to the port and the server accepts the connection. This mode is more secure
    • Modify the vsftpd.conf configuration file. Set the FTP server to passive mode
    Use the default values for all parameters except those mentioned below. Change the values of the following parameters: disable anonymous login to the FTP server. Anonymous_enable =NO # Allow local users to log in to the FTP server. Local_enable =YES # Listen for IPv4 sockets Listen =YES # add # comment out the following parameters at the beginning of the line: #listen_ipv6=YES # Add the following parameters to the end of the configuration file: Local_root =/var/ftp/test # all users are restricted to the home directory. Chroot_local_user =YES # Enable the exception user list. Chroot_list_enable =YES # Specifies an exception user list file where users are not locked in the home directory. Chroot_list_file =/etc/ vsftp/chroot_list Pasv_enable =YES allow_writeable_chroot=YES # The public IP of the Linux instance in this tutorial. Pasv_address =<FTP server public IP address > # Set the minimum port range for establishing data transmission in passive mode. It is recommended that you set the port range to a relatively high range, such as 50000~50010, to improve the security of accessing FTP server. Pasv_min_port =<port number> # Set the maximum number of ports that can be used to establish data transmission in passive mode. pasv_max_port=<port number>Copy the code
    • The MAC address can be written to the FTP server only when the THIRD-PARTY APP is used. In this case, the TransMit is used

Nginx configuration

  • Configure the server
    • Common static server fields
      • You can configure rules to distinguish constant resources from constant resources, and cache static resources. (CDN is feasible or not)
      • Server: Used to define services. HTTP can have multiple server blocks
      • Listen: Specifies the IP address and port on which the server listens for requests. If the IP address is omitted, the server listens for all addresses. If the port is omitted, the standard port is used
      • Server_name: indicates the service name used for the configuration domain name
      • location : A server can have multiple locations, followed by a URI, which can be a regular expression. / means to match any path. When the client accesses a path that meets this URI, the code in the Location block will be executed
        • Common mapping
          • =Perform normal character exact matching. So it’s a perfect match.
          • ^ ~Prefix match. If the match is successful, no other location is matched, and even if there are regular matches, they are not used.
          • ~Indicates that a regular match is performed, case sensitive
          • ~ *Indicates that a regular match is performed, case insensitive
          • /xxx/Regular string path matching
          • /Universal match, any request will be matched
        • Priority (independent of configured position)
          • =The equal sign type has the highest priority. Once a match is successful, the search stops.
          • ^ ~Type expression that is not a regular expression. Once a match is successful, the search stops.
          • ~ ~ *The priority of the regular expression type. If more than one location regex matches, the one with the longest regular expression is used.
          • General string matching type. Match by prefix.
          • / Universal match. If no match is found, universal is matched
      • Root: indicates the root path when accessinghttp://localhost/test.html, /test. HTML matches the/URI, and root is found to be/usr/local/var/www/html, the physical address of the resource accessed by the user =root + uri = /usr/local/var/www/html + /test.html=/usr/local/var/www/html/test.html
      • Index: set the home page to be accessed onlyserver_nameIf you do not follow any path, you do not go root directly to the index instruction; If no specific file is specified in the access path, the resource set by index is returned if accessedhttp://localhost/html/Index.html is returned by default
      #user nobody; http { server { listen 80; server_name localhost; client_max_body_size 1024M; # default location location {root /usr/local/var/ WWW/HTML; index index.html index.htm; }}}Copy the code
  • The reverse proxy
    • A real server cannot be directly accessed by an external network. Therefore, a proxy server is required. The proxy server can be accessed by an external network and resides on the same network environment as the real server or on the same server with different ports
    • Proxy_pass instruction
    server { listen 80; server_name localhost; location / { proxy_pass http://localhost:8081; proxy_set_header Host $host:$server_port; Proxy_set_header X-Forwarded-For $remote_ADDR; Proxy_next_upstream error timeout invalid_header http_500 http_502 http_503; }}Copy the code

    • Load balancing

      • When two or more servers are deployed, requests are randomly sent to the specified server for processing based on rules. In general, a reverse proxy is configured for load balancing. Nginx currently supports three load balancing policies and two common third-party policies, which can be used only when third-party modules are installed (fair, URl_hash).
      • polling

      The first request to allocate the first server, the second time to allocate to the second server, circular polling, server hanging can be automatically removed

      upstream web_servers { server localhost:8081; server localhost:8082; } server { listen 80; server_name localhost; #access_log logs/host.access.log main; location / { proxy_pass http://web_servers; Proxy_set_header Host $Host :$server_port; }}Copy the code
      • The weight

      Specify the polling probability. The ratio of requests received by servers is the ratio of their configured weights. Backup is a backup.

      upstream test {
    server localhost:8081 weight=1;
    server localhost:8082 weight=3;
    server localhost:8083 weight=4 backup;
}
Copy the code

      Only one of the four requests is assigned to 8081, and the other three are assigned to 8082. Backup refers to hot backup. 8083 will be run only when 8081 and 8082 are down

      • ip_hash

      Polling makes stateful requests (with session) to another server requiring a re-login. Each user accesses only one server at a time. Requests are allocated according to the HASH result of the IP address. Each user accesses only one server at a time.

      upstream test {
    ip_hash;
    server localhost:8080;
    server localhost:8081;
}
Copy the code
      • fair

      Requests are allocated based on the server’s response time, with shorter time being preferred

      upstream test {
    fair;
    server localhost:8080;
    server localhost:8081;
}
Copy the code
      • url_hash

      Requests are allocated according to the HASH structure of the URL, directing a URL to a fixed server

      upstream test {
    hash $request_uri;
    server localhost:8080;
    server localhost:8081;
}
Copy the code
  • Other instructions
    • Return Returns the status code
    • Rewrite rewrites uri requests
    • Error_page The user-defined error code is returned to the page
    • Log_format Access logs
    • Deny Deny access to a directory
    • Built-in variables
      • $request_uri: Contains the original URI of the request parameters, excluding the host name, as in:/foo/bar.php? arg=baz

      .

Ci/CD configuration

  • github run