focus
前言
对于浅尝Node.js的前端开发人员来说，可能使用脚手架工具，可以快速上手Node项目。但是，自己搭建项目，更加适用于实际开发中个性化的业务场景，且能由浅入深了解到项目运行的原理，收获更多的东西。
这系列的文章就是从零开始，搭建一个可以实际应用的Node.js项目框架结构。希望大家能了解到一个真实的后端项目，是如何运作的。
本章目标
- 了解项目基础框架运行流程
- 搭建
Node.js项目基础框架
利用技术
gulp构建工具nodemon监控工具eslint代码检查工具babelES6编译器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的第一个中间件。
