Related articles

  • P01: Node.js tutorial from a practical perspective
  • P02: Basic node usage
  • P03: Node built-in module PATH
  • P04: Buffer for nodeAPI
  • P05: Events of node built-in module
  • P06: Node built-in module FS (1)
  • P07: Node built-in module FS (2)
  • P08: Node implements static server ~ create project
  • P09: Node implements static server ~ Hello HTTP
  • P10: Node implements static server ~ static file or folder reading

Finally start static static server related learning!!

Create a project


Use Github for project building and code management

  • Click new

  • Fill in the basic information of the project

  • So we have successfully created a project on Github

  • Download to local

  • git clone XXXXXXX

Introduction to Basic Files


  • .gitignoreProject unnecessary files are not managed by Git
    • Rules for ignoring files:
      • Ignore files automatically generated by the operating system, such as thumbnails.
      • Ignore compile-generated intermediate files, executables, etc., i.e. if a file is automatically generated from another file, then the automatically generated file does not need to be included in the version library, such as the.class file generated by Java compilation.
      • Ignore your own profiles with sensitive information, such as passwords.
    • Common rules:
      • Start bit#On behalf of the annotation
      • Before matching pattern/Represents the project root directory
      • After matching the pattern/On behalf of the directory
      • Before matching pattern!Represents the inverse of ~It is often used to manage only one or a few files in the entire file
      • *Matches any character
      • 六四运动Indicates matching multi-level directories
      • ?Matches a character
  • LICENSEProject license agreement, for details, please refer to the internal description
  • README.mdProject manual, use others project recommended to see this document first

Other Configurations


  • Npmignore has the same syntax as Gitignore, but is used to restrict the files of NPM packages
    • Note that when uploading packages to NPM, if not set.npmignoreIt will be used by default.gitignore
    • Sometimes there is no build package because it is.gitignoreIgnore, so make sure you set it right.npmignore
  • eitorconfig
    • Used to manage the project code style
    • Some basic configurations
    # EditorConfig is awesome: https://EditorConfig.org
    
    # top-most EditorConfig file
    root = true
    
    # Unix-style newlines with a newline ending every file
    [*]
    end_of_line = lf
    insert_final_newline = true
    
    # Matches multiple files with brace expansion notation
    # Set default charset
    [*.{js,py}]
    charset = utf-8
    
    # 4 space indentation
    [*.py]
    indent_style = space
    indent_size = 4
    
    # Tab indentation (no size specified)
    [Makefile]
    indent_style = tab
    
    # Indentation override for all JS under lib directory
    [lib/**.js]
    indent_style = space
    indent_size = 2
    
    # Matches the exact files either package.json or .travis.yml
    [{package.json,.travis.yml}]
    indent_style = space
    indent_size = 2
    Copy the code

Project Usage Tools


  • ESlint
    • The eslintrc.js file configuration has to be mentioned here, a relatively detailed one is posted here
     module.exports = {
      root: true,
      parserOptions: {
        parser: 'babel-eslint'.sourceType: 'module'
      },
      env: {
        browser: true,
        node: true,
        es6: true,
      },
      extends: ['eslint:recommended'],
    
      // add your custom rules here
      rules: {
        'accessor-pairs': 2.'arrow-spacing': [2, {
          'before': true.'after': true}].'block-spacing'A: [2,'always'].'brace-style'A: [2,'1tbs', {
          'allowSingleLine': true}].'camelcase': [0, {
          'properties': 'always'}].'comma-dangle'A: [2,'never'].'comma-spacing': [2, {
          'before': false.'after': true}].'comma-style'A: [2,'last'].'constructor-super': 2.'curly'A: [2,'multi-line'].'dot-location'A: [2,'property'].'eol-last': 2.'eqeqeq'A: [2,'allow-null'].'generator-star-spacing': [2, {
          'before': true.'after': true}].'handle-callback-err'A: [2,'^(err|error)$'].'indent': [2, 2, {
          'SwitchCase': 1}].'jsx-quotes'A: [2,'prefer-single'].'key-spacing': [2, {
          'beforeColon': false.'afterColon': true}].'keyword-spacing': [2, {
          'before': true.'after': true}].'new-cap': [2, {
          'newIsCap': true.'capIsNew': false}].'new-parens': 2.'no-array-constructor': 2.'no-caller': 2.'no-console': 'off'.'no-class-assign': 2.'no-cond-assign': 2.'no-const-assign': 2.'no-control-regex': 2.'no-delete-var': 2.'no-dupe-args': 2.'no-dupe-class-members': 2.'no-dupe-keys': 2.'no-duplicate-case': 2.'no-empty-character-class': 2.'no-empty-pattern': 2.'no-eval': 2.'no-ex-assign': 2.'no-extend-native': 2.'no-extra-bind': 2.'no-extra-boolean-cast': 2.'no-extra-parens'A: [2,'functions'].'no-fallthrough': 2.'no-floating-decimal': 2.'no-func-assign': 2.'no-implied-eval': 2.'no-inner-declarations'A: [2,'functions'].'no-invalid-regexp': 2.'no-irregular-whitespace': 2.'no-iterator': 2.'no-label-var': 2.'no-labels': [2, {
          'allowLoop': false.'allowSwitch': false}].'no-lone-blocks': 2.'no-mixed-spaces-and-tabs': 2.'no-multi-spaces': 2.'no-multi-str': 2.'no-multiple-empty-lines': [2, {
          'max': 1}].'no-native-reassign': 2.'no-negated-in-lhs': 2.'no-new-object': 2.'no-new-require': 2.'no-new-symbol': 2.'no-new-wrappers': 2.'no-obj-calls': 2.'no-octal': 2.'no-octal-escape': 2.'no-path-concat': 2.'no-proto': 2.'no-redeclare': 2.'no-regex-spaces': 2.'no-return-assign'A: [2,'except-parens'].'no-self-assign': 2.'no-self-compare': 2.'no-sequences': 2.'no-shadow-restricted-names': 2.'no-spaced-func': 2.'no-sparse-arrays': 2.'no-this-before-super': 2.'no-throw-literal': 2.'no-trailing-spaces': 2.'no-undef': 2.'no-undef-init': 2.'no-unexpected-multiline': 2.'no-unmodified-loop-condition': 2.'no-unneeded-ternary': [2, {
          'defaultAssignment': false}].'no-unreachable': 2.'no-unsafe-finally': 2.'no-unused-vars': [2, {
          'vars': 'all'.'args': 'none'}].'no-useless-call': 2.'no-useless-computed-key': 2.'no-useless-constructor': 2.'no-useless-escape': 0.'no-whitespace-before-property': 2.'no-with': 2.'one-var': [2, {
          'initialized': 'never'}].'operator-linebreak'A: [2,'after', {
          'overrides': {
            '? ': 'before'.':': 'before'}}].'padded-blocks'A: [2,'never'].'quotes'A: [2,'single', {
          'avoidEscape': true.'allowTemplateLiterals': true}].'semi'A: [2,'never'].'semi-spacing': [2, {
          'before': false.'after': true}].'space-before-blocks'A: [2,'always'].'space-before-function-paren'A: [2,'never'].'space-in-parens'A: [2,'never'].'space-infix-ops': 2.'space-unary-ops': [2, {
          'words': true.'nonwords': false}].'spaced-comment'A: [2,'always', {
          'markers': ['global'.'globals'.'eslint'.'eslint-disable'.'*package'.'! '.', ']}],'template-curly-spacing'A: [2,'never'].'use-isnan': 2.'valid-typeof': 2.'wrap-iife'A: [2,'any'].'yield-star-spacing'A: [2,'both'].'yoda'A: [2,'never'].'prefer-const': 2.'no-debugger': process.env.NODE_ENV === 'production'? 2:0,'object-curly-spacing'A: [2,'always', {
          objectsInObjects: false}].'array-bracket-spacing'A: [2,'never']}}Copy the code
  • XXXignore
    • Many tools or dependencies have their own unique ignore, which is not described here

Control project code quality


We know we can use tools to standardize our project code and make the team’s code style consistent, and the most common tool is ESLint. There was one problem, however, that I did not comply with, ignoring the error and submitting the code. There are steps for submitting for review, but is there any way to control the source of unregulated code from being submitted to project code management (such as Git)? The answer is: YES

  • pre-commit
    • Although we can configure ourselves to implement the requirements mentioned above, there is no need to use tools
    • Pre-commit has done most of the configuration for us
    • Just configure package.json as follows
      "scripts": {
          "lint": "eslint --fix --ext .js,.vue src"
      },
      "pre-commit": [
          "lint"].Copy the code
    • Lint is automatically executed before committing code, and if there are irregularities that cannot be fixed automatically, commit is terminated

We’re done. We can rub out the code