preface

For front-end developers who have dabbled in Node.js, they may use scaffolding tools to get started with Node projects quickly. However, building projects by ourselves is more suitable for the personalized business scenarios in actual development, and we can understand the principle of project operation from simple to profound, and gain more things.

This series of articles is to build a practical Node.js project framework from scratch. So hopefully you get a sense of how a real back-end project works.

Objective in this chapter

  • Understand the operation process of the project basic framework
  • Set upNode.jsProject basic framework

The use of technology

  • Gulp build tool

  • Nodemon Monitoring tool

  • Eslint code checking tool

  • Babel ES6 compiler

  • Pm2 process management tool

The framework processes

Create a project

  • Initialize the project
mkdir focus
cdFocus // Initialize NPM project NPM init in focus fileCopy the code
  • Install dependencies
// global installation pm2 NPM install pm2 -g // gulp build tool NPM install gulp gulp-eslint gulp-nodemon --save-dev // Babel ES6 compiler NPM install @babel/cli @babel/core @babel/register @babel/preset-env @babel/plugin-transform-runtime --save-dev // eslint Code check utility NPM install eslint-plugin-node eslint-plugin-promise eslint-plugin-import eslint-friendly-formatter --save-dev // NPM install [email protected] eslint-plugin-standard --save-dev for higher versions of gulp-eslintCopy the code
  • infrastructure

The root directory creates the.babelrc file and configures Babel

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}
Copy the code

Create the.eslintrc.js file in the root directory and configure ESLint

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2017,
    sourceType: 'module'
  },
  extends: 'standard',
  plugins: [
    'promise'
  ],
  env: {
    'node': true
  },
  rules: {
    'no-debugger': 0
  },
}
Copy the code

The.eslintignore file is created in the root directory and esLint is configured to ignore the file

dist/*.js
assets/*.js
Copy the code

Create file.config. js in the root directory and configure pM2

module.exports = {
  apps: [
    {
      name: 'focus',
      script: './dist/app.js',
      env: {
        NODE_ENV: 'production'
      }
    }
  ]
}
Copy the code

Create gulpfile.js in the root directory and configure gulp

const gulp = require('gulp') const eslint = require('gulp-eslint') const friendlyFormatter = require('eslint-friendly-formatter') const nodemon = require('gulp-nodemon') function lint (aims) { return gulp.src(aims) .pipe(eslint({ configFile: './.eslintrc.js' })) .pipe(eslint.format(friendlyFormatter)) .pipe(eslint.results(results => { console.log(`- [Results]:${results.length} [Warnings]:${results.warningCount} [Errors]:${results.errorCount}`) console.log('Finished Eslint ')})} / check/eslint gulp. Task (' eslint '() = > {return lint ([' SRC / *. Js])}) / / modify the code automatically restart gulp. Task (' nodemon', () => { return nodemon({ script: './main.js', execMap: { js: 'node' }, tasks: (aims) => { lint(aims) return [] }, verbose: true, env: { NODE_ENV: 'development' }, watch: ['src'], ext: 'js json' }).on('crash', () => { console.error('Application has crashed! \n') }) }) gulp.task('default', gulp.series('ESlint', 'nodemon'))Copy the code

The root directory creates the main.js file and develops the mode entry file

require('@babel/register')
require('./src/app')
Copy the code

The root directory creates the SRC directory and creates the SRC /app.js file, the project entry file

console.log('hello focus')
Copy the code

Add the script to the root directory package.json

"scripts": {
    "dev": "gulp",
    "build": "babel src -d dist",
    "start": "pm2 start",
    "node": "node ./dist/app.js",
  }
Copy the code

At this point, the project development environment is set up and you can try running the project using NPM.

NPM run node NPM run pm2 NPM run pm2Copy the code

conclusion

This chapter mainly explains the operation process of the project foundation framework and how to create the foundation framework.

The next chapter covers Koa2’s ‘Onion model’ and implements Koa2’s first middleware.