Front-end Towards Architect Step 1 – Quick understanding of the KOA framework -4

Today is still a day to learn koA framework. The last time I learned it was o()o

Into the study is

• Webpack configuration
• Nodemon Monitors file changes
• Implementation of paging and search

Webpack configuration node

/ / installation
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
Copy the code

• Clean-webpack-plugin Cleans up the dist folder
• Webpack – node – node_modules externals ruled out
• Babel supports ES6 syntax

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
Copy the code

.babelrc

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

package.json

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

Nodemon automatically detects file changes and restarts the service when there are changes to debug Node.js-based applications.

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

/ / 2. Use
nodemon dist/app.js // Start node service
nodemon ./main.js localhost 3000 // Start the Node service on port 3000

// 3 Package. json configuration
// Nodemon uses the common. Js syntax for monitoring. How do we support es6 syntax for monitoring execution?
"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"}}// Run nodemon Start Server :dev

// 4 Configuring nodemon: To monitor the specified file, configure nodemon.json
{
    "watch": ["./src/**/*.*"]}// Configure the Nodemon Debug mode
{
  "scripts": {
    "server:dev": "DEBUG=* nodemon dist/app.js",}}Copy the code

Paging and fuzzy searching

// The key to paging search is the query parameters' SKIP 'and' limit ', while fuzzy search uses regular expressions

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);
}
Copy the code