focus

前言

對(duì)于淺嘗Node.js的前端開(kāi)發(fā)人員來(lái)說(shuō)，可能使用腳手架工具，可以快速上手Node項(xiàng)目。但是，自己搭建項(xiàng)目，更加適用于實(shí)際開(kāi)發(fā)中個(gè)性化的業(yè)務(wù)場(chǎng)景，且能由淺入深了解到項(xiàng)目運(yùn)行的原理，收獲更多的東西。

這系列的文章就是從零開(kāi)始，搭建一個(gè)可以實(shí)際應(yīng)用的Node.js項(xiàng)目框架結(jié)構(gòu)。希望大家能了解到一個(gè)真實(shí)的后端項(xiàng)目，是如何運(yùn)作的。

本章目標(biāo)

• 了解項(xiàng)目基礎(chǔ)框架運(yùn)行流程
• 搭建Node.js項(xiàng)目基礎(chǔ)框架

利用技術(shù)

• gulp 構(gòu)建工具

• nodemon 監(jiān)控工具

• eslint 代碼檢查工具

• babel ES6編譯器

• pm2 進(jìn)程管理工具

框架流程

創(chuàng)建項(xiàng)目

• 初始化項(xiàng)目

mkdir focus
cd focus
// 在focus文件中初始化npm項(xiàng)目
npm init

• 安裝依賴(lài)

// 全局安裝pm2
npm install pm2 -g
// gulp 構(gòu)建工具
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

• 基礎(chǔ)結(jié)構(gòu)

根目錄創(chuàng)建 .babelrc 文件，配置babel

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

根目錄創(chuàng)建 .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
  },
}

根目錄創(chuàng)建 .eslintignore 文件，配置eslint忽略文件

dist/*.js
assets/*.js

根目錄創(chuàng)建 ecosystem.config.js 文件，配置pm2

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

根目錄創(chuàng)建 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'])
})

// 修改代碼自動(dòng)重啟
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'))

根目錄創(chuàng)建 main.js 文件，開(kāi)發(fā)模式入口文件

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

根目錄創(chuàng)建 src 目錄 并創(chuàng)建 src/app.js 文件，項(xiàng)目入口文件

console.log('hello focus')

根目錄 package.json 中添加腳本

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

至此，項(xiàng)目開(kāi)發(fā)環(huán)境已搭建完畢，可嘗試使用npm運(yùn)行項(xiàng)目。

// 開(kāi)發(fā)環(huán)境
npm run dev
// 打包
npm run build
// 使用node啟動(dòng)項(xiàng)目
npm run node
// 使用pm2啟動(dòng)項(xiàng)目
npm run pm2

總結(jié)

本章主要講解項(xiàng)目基礎(chǔ)框架的運(yùn)行流程，以及如何新建基礎(chǔ)框架。

下一章將講解Koa2的“洋蔥模型”，并實(shí)現(xiàn)Koa2的第一個(gè)中間件。