Express Generator脚手架工具

作者：陈川阅读数：8013人阅读分类： Node.js

Express Generator脚手架工具简介

Express Generator是Express团队官方提供的命令行工具，用于快速生成Express应用的基础结构。它通过预设的模板和配置，帮助开发者跳过重复的初始化工作，直接进入业务逻辑开发阶段。

安装Express Generator

全局安装Express Generator非常简单，只需要运行以下npm命令：

npm install -g express-generator

安装完成后，可以通过express --version命令验证是否安装成功。对于只想在当前项目使用的开发者，也可以不全局安装：

npm install express-generator --save-dev

基本使用方法

创建新Express项目的基本命令格式为：

express [options] [dir]

其中dir参数指定项目目录名称。如果不指定，则会在当前目录创建项目。常用的选项包括：

-v, --view <engine> 指定模板引擎（默认为jade）
-c, --css <engine> 指定CSS预处理器（如less/stylus/sass）
--git 添加.gitignore文件
-f, --force 强制在非空目录创建项目

例如，创建一个使用EJS模板引擎和SASS的项目：

express --view=ejs --css=sass myapp

生成的项目结构分析

Express Generator生成的标准项目结构包含以下关键部分：

myapp/
├── app.js
├── bin/
│   └── www
├── package.json
├── public/
│   ├── images/
│   ├── javascripts/
│   └── stylesheets/
├── routes/
│   ├── index.js
│   └── users.js
└── views/
    ├── error.jade
    ├── index.jade
    └── layout.jade

app.js是应用的核心入口文件，包含了中间件配置和路由设置。bin/www是启动脚本，处理服务器监听和端口设置。public目录存放静态资源，routes包含路由逻辑，views则是模板文件。

自定义项目配置

虽然Express Generator提供了合理的默认配置，但开发者经常需要根据项目需求进行调整。例如修改默认端口可以在bin/www中：

var port = normalizePort(process.env.PORT || '3000');

要添加新的中间件，可以在app.js中找到相应位置插入：

// 添加body-parser中间件
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

模板引擎支持

Express Generator支持多种流行的模板引擎，通过--view选项指定：

express --view=pug myapp  # 使用Pug(Jade)
express --view=ejs myapp  # 使用EJS
express --view=hbs myapp  # 使用Handlebars

以EJS为例，生成的视图文件会是这样的结构：

<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
</body>
</html>

路由系统解析

生成的项目包含基本的路由配置。routes/index.js处理根路径请求：

var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

要添加新路由，可以创建新的路由文件并在app.js中注册：

// routes/about.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
  res.send('About Page');
});

module.exports = router;

// 在app.js中添加
var aboutRouter = require('./routes/about');
app.use('/about', aboutRouter);

静态资源处理

Express Generator自动配置了静态文件中间件：

app.use(express.static(path.join(__dirname, 'public')));

这意味着public目录下的文件可以直接通过URL访问。例如public/stylesheets/style.css可以通过/stylesheets/style.css访问。

对于需要CDN或其他特殊处理的静态资源，可以添加额外的静态目录：

app.use('/cdn', express.static(path.join(__dirname, 'cdn-assets')));

错误处理机制

生成的项目包含基本的错误处理中间件：

// 捕获404错误
app.use(function(req, res, next) {
  next(createError(404));
});

// 错误处理器
app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  
  res.status(err.status || 500);
  res.render('error');
});

开发者可以扩展这个错误处理逻辑，例如添加日志记录：

app.use(function(err, req, res, next) {
  console.error(err.stack);
  next(err);
});

与数据库集成

虽然Express Generator不直接包含数据库配置，但可以轻松集成。以MongoDB为例，首先安装mongoose：

npm install mongoose

然后在app.js中添加连接代码：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/myapp', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

创建模型文件models/user.js：

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const userSchema = new Schema({
  name: String,
  email: String
});

module.exports = mongoose.model('User', userSchema);

测试支持

Express Generator生成的项目不包含测试配置，但可以轻松添加。以Jest为例：

npm install --save-dev jest supertest

创建tests/app.test.js：

const request = require('supertest');
const app = require('../app');

describe('GET /', () => {
  it('responds with 200', async () => {
    await request(app)
      .get('/')
      .expect(200);
  });
});

在package.json中添加测试脚本：

"scripts": {
  "test": "jest"
}

生产环境部署

对于生产环境部署，Express Generator生成的bin/www已经考虑了基本需求。但还需要注意：

设置环境变量：

export NODE_ENV=production

使用进程管理器如PM2：

npm install -g pm2
pm2 start ./bin/www

配置反向代理（Nginx示例）：

server {
    listen 80;
    server_name example.com;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

扩展生成器功能

开发者可以创建自己的Express Generator模板。首先fork官方仓库，然后修改/templates目录下的文件结构。主要文件包括：

js/ - 包含各种模板文件
support/ - 辅助功能代码
cli.js - 命令行接口

修改后可以通过npm link在本地测试：

npm link
express --my-custom-option

常见问题解决

问题1：端口已被占用解决方案：修改bin/www中的端口号，或杀死占用进程：

lsof -i :3000
kill -9 <PID>

问题2：模板引擎不渲染检查app.js中是否正确配置了视图引擎：

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

问题3：静态资源404 确保public目录存在且中间件正确加载：

app.use(express.static(path.join(__dirname, 'public')));

与其他工具集成

Express Generator可以与现代前端工具链集成。例如与Webpack：

安装依赖：

npm install --save-dev webpack webpack-cli babel-loader @babel/core

创建webpack.config.js：

module.exports = {
  entry: './public/javascripts/main.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

在模板中引用打包后的文件：

<script src="/dist/bundle.js"></script>

性能优化建议

启用压缩中间件：

npm install compression

const compression = require('compression');
app.use(compression());

设置缓存头：

app.use(express.static(path.join(__dirname, 'public'), {
  maxAge: '1d'
}));

使用集群模式：

const cluster = require('cluster');
const numCPUs = require('os').cpus().length;

if (cluster.isMaster) {
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }
} else {
  // 启动服务器代码
}

安全最佳实践

设置安全相关的HTTP头：

npm install helmet

const helmet = require('helmet');
app.use(helmet());

防止CSRF攻击：

npm install csurf

const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });
app.use(csrfProtection);

限制请求体大小：

app.use(express.json({ limit: '10kb' }));
app.use(express.urlencoded({ extended: true, limit: '10kb' }));

现代化改进方向

对于已经使用Express Generator创建的项目，可以考虑以下现代化改进：

转换为ES模块：

// package.json
"type": "module"

使用async/await重构路由：

router.get('/', async (req, res, next) => {
  try {
    const data = await fetchData();
    res.render('index', { data });
  } catch (err) {
    next(err);
  }
});

添加TypeScript支持：

npm install --save-dev typescript @types/express @types/node

创建tsconfig.json：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true
  }
}

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：项目维护与迭代策略

下一篇：常用插件与扩展库介绍