前端迈向架构师第一步-快速了解koa框架-4

「这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战」

今天还是学习koa框架的一天，上一次学习还是在上一次o(￣︶￣)o

进了学习的是

• webpack的配置
• nodemon监控文件变化
• 分页和搜索的实现

webpack配置node

// 安装
npm i -D webpack webpack-cli
npm i -D clean-webpack-plugin webpack-node-externals @babel/core @babel/node @babel/preset-env babel-loader cross-env

• clean-webpack-plugin 清理 dist 文件夹
• webpack-node-externals 排除 node_modules
• babel 支持es6语法

webpack.config.js

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const webpackconfig = {
  target: 'node',
  mode: 'development',
  entry: {
    server: path.join(__dirname, 'src/app.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, 'dist')
  },
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader'
        },
        exclude: [path.join(__dirname, 'node_modules')]
      }
    ]
  },
  externals: [nodeExternals()],
  plugins: [new CleanWebpackPlugin()],
  node: {
    console: true,
    global: true,
    process: true,
    Buffer: true,
    __filename: true,
    __dirname: true,
    setImmediate: true,
    path: true
  }
}

module.exports = webpackconfig

.babelrc

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

package.json

"scripts": {
  "serve": "nodemon --exec babel-node src/app.js"
},

nodemon 自动监测文件的变化，当有变化时重新启动服务，来调试基于node.js的应用程序。

// 1.安装
npm install nodemon -D(--save-dev)

// 2.使用
nodemon dist/app.js // 启动node服务
nodemon ./main.js localhost 3000 // 在本地3000端口启动node服务

// 3 package.json配置
// nodemon是利用common.js语法执行的进行监视的，我们如何支持es6的语法进行监视执行呢？
"start": "nodemon --exec babel-node src/main.ts",
{
  "scripts": {
    "start": "tsc && node dist/app.js",
    "server:dev": "nodemon dist/app.js",
    "start": "ts-node -r tsconfig-paths/register nodemon src/app.ts",
    "watch": "nodemon --watch 'src/**/*' -e ts,tsx --exec 'ts-node' ./src/app.ts"
  }
}
// 运行nodemon start server:dev

// 4 配置 nodemon：为了监测指定的文件，需要配置 nodemon.json
{
    "watch":["./src/**/*.*"]
}
// 配置 nodemon debug模式
{
  "scripts": {
    "server:dev": "DEBUG=* nodemon dist/app.js",
  }
}

分页和模糊搜索

// 分页搜索的关键是`skip`和`limit`这两个查询参数，模糊搜索则使用了正则表达式

async find(ctx) {
  const { per_page = 10 } = ctx.query;
  const page = Math.max(ctx.query.page * 1, 1) - 1;
  const perPage = Math.max(per_page * 1, 1);
  const q = new RegExp(ctx.query.q);
  ctx.body = await Question.find({ $or: [{ title: q }, { description: q }] })
    .limit(perPage)
    .skip(perPage * page);
}