Loading...
墨滴

Bran今天下班了么

2021/04/19  阅读:117  主题:默认主题

从零开始搭建实战级Nodejs服务项目 —— 1. 项目基础框架

从零开始搭建实战级Nodejs服务项目 —— 1. 项目基础框架

前言

对于浅尝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的第一个中间件。

Bran今天下班了么

2021/04/19  阅读:117  主题:默认主题

作者介绍

Bran今天下班了么