focus

前言

对于浅尝Node.js的前端开发人员来说，可能使用脚手架工具，可以快速上手Node项目。但是，自己搭建项目，更加适用于实际开发中个性化的业务场景，且能由浅入深了解到项目运行的原理，收获更多的东西。

这系列的文章就是从零开始，搭建一个可以实际应用的Node.js项目框架结构。希望大家能了解到一个真实的后端项目，是如何运作的。

本章目标

• 了解项目基础框架运行流程
• 搭建Node.js项目基础框架

利用技术

• gulp 构建工具

• nodemon 监控工具

• eslint 代码检查工具

• babel ES6编译器

• pm2 进程管理工具

框架流程

创建项目

• 初始化项目

mkdir focus
cd focus
// 在focus文件中初始化npm项目
npm init

• 安装依赖

// 全局安装pm2
npm install pm2 -g
// gulp 构建工具
npm install gulp gulp-eslint gulp-nodemon --save-dev
// babel ES6编译器
npm install @babel/cli @babel/core @babel/register @babel/preset-env @babel/plugin-transform-runtime --save-dev
// eslint 代码检查工具
npm install eslint-plugin-node eslint-plugin-promise eslint-plugin-import eslint-friendly-formatter --save-dev
// 高版本standard与gulp-eslint有冲突，这里指定版本安装
npm install eslint-config-standard@14.1.1 eslint-plugin-standard --save-dev

• 基础结构

根目录创建 .babelrc 文件，配置babel

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

根目录创建 .eslintrc.js 文件，配置eslint

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

根目录创建 .eslintignore 文件，配置eslint忽略文件

dist/*.js
assets/*.js

根目录创建 ecosystem.config.js 文件，配置pm2

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

根目录创建 gulpfile.js 文件，配置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')
    }))
}

// eslint检查
gulp.task('ESlint', () => {
  return lint(['src/*.js'])
})

// 修改代码自动重启
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'))

根目录创建 main.js 文件，开发模式入口文件

require('@babel/register')
require('./src/app')

根目录创建 src 目录 并创建 src/app.js 文件，项目入口文件

console.log('hello focus')

根目录 package.json 中添加脚本

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

至此，项目开发环境已搭建完毕，可尝试使用npm运行项目。

// 开发环境
npm run dev
// 打包
npm run build
// 使用node启动项目
npm run node
// 使用pm2启动项目
npm run pm2

总结

本章主要讲解项目基础框架的运行流程，以及如何新建基础框架。

下一章将讲解Koa2的“洋葱模型”，并实现Koa2的第一个中间件。