推薦分享Node.js中18個值得了解的Web框架和工具

2022-02-21 22:00:17
本篇文章是一個Web框架和工具分享文章,本文中給大家總結分享18個我最推薦的 Web框架和工具,希望對大家有所幫助!

是一個底層平臺。為了方便開發者的工作變得簡單高效,社群誕生了超過上千個庫。

隨著時間的推移,有很多優秀的庫可以供大家選擇,下面是不完全選擇列表:

  • Express: 提供非常簡單的方式來建立Web伺服器,且功能足夠強大並且足夠的輕量,專注於伺服器的核心功能。

    // server.js
    const express = require('express')
    const app = express()
    const port = 3000
    
    app.get('/', (req, res) => {
      res.send('Hello World!')
    })
    
    app.listen(port, () => {
      console.log(`Example app listening on port ${port}`)
    })
  • koa: 它是由Express背後的同一團隊打造,提供更加簡單、更小巧的庫,並且支援ES NEXT的async await語法。

    // server.js
    const Koa = require('koa');
    const app = new Koa();
    
    app.use(async ctx => {
      ctx.body = 'Hello World';
    });
    
    app.listen(3000);
  • NestJS: 一個基於TypeScript的漸進式Node.js框架,用於構建高效、可靠、可延伸的企業級伺服器端應用程式。

    // app.controller.ts
    import { Get, Controller, Render } from '@nestjs/common';
    import { AppService } from './app.service';
    
    @Controller()
    export class AppController {
        constructor(private readonly appService: AppService) {}
    
        @Get()
        @Render('index')
        render() {
            const message = this.appService.getHello();
            return { message };
        }
    }
  • Egg.js: 使用Node.js和Koa構建更好的企業級伺服器端框架。

    // app/controller/home.js
    const Controller = require('egg').Controller;
    
    class HomeController extends Controller {
      async index() {
        this.ctx.body = 'Hello world';
      }
    }
    
    module.exports = HomeController;
  • Next.js: React 框架提供了良好的開發體驗,提供生產環境的所有功能:伺服器端渲染、支援TypeScript、路由預獲取等等。

    // first-post.js
    export default function FirstPost() {
      return <h1>First Post</h1>
    }
  • Remix: Remix 是一個全棧Web框架,它開箱即用,包含構建現代Web應用程式前端和後端。

    // index.tsx
    export async function loader({ request }) {
      return getProjects();
    }
    
    export async function action({ request }) {
      const form = await request.formData();
      return createProject({ title: form.get("title") });
    }
    
    export default function Projects() {
      const projects = useLoaderData();
      const { state } = useTransition();
      const busy = state === "submitting";
    
      return (
        <div>
          {projects.map((project) => (
            <Link to={project.slug}>{project.title}</Link>
          ))}
    
          <Form method="post">
            <input name="title" />
            <button type="submit" disabled={busy}>
              {busy ? "Creating..." : "Create New Project"}
            </button>
          </Form>
        </div>
      );
    }
  • Gatsby: 一個基於React、GraphQL的靜態站點生成器,具有非常豐富的外掛和生態。

    // src/pages/index.js
    import * as React from 'react'
    
    const IndexPage = () => {
      return (
        <main>
          <title>Home Page</title>
          <h1>Welcome to my Gatsby site!</h1>
          <p>I'm making this by following the Gatsby Tutorial.</p>
        </main>
      )
    }
    
    export default IndexPage
  • hapi: 用於構建Web應用服務的框架,使開發人員能夠專注於編寫可重用的應用程式邏輯,而不是花費時間構建基礎設施。

    // index.js
    
    'use strict';
    
    const Hapi = require('@hapi/hapi');
    
    const init = async () => {
    
        const server = Hapi.server({
            port: 3000,
            host: 'localhost'
        });
    
        server.route({
            method: 'GET',
            path: '/',
            handler: (request, h) => {
                return 'Hello World!';
            }
        });
    
        await server.start();
        console.log('Server running on %s', server.info.uri);
    };
    
    process.on('unhandledRejection', (err) => {
        console.log(err);
        process.exit(1);
    });
    
    init();
  • Fastify: 一個高度專注於以最少的開銷和強大的外掛架構,提供最佳的開發體驗的Web框架。Fastify是最快的Node.js Web框架之一。

    // server.js
    const fastify = require('fastify')({ logger: true })
    
    // Declare a route
    fastify.get('/', async (request, reply) => {
      return { hello: 'world' }
    })
    
    // Run the server!
    const start = async () => {
      try {
        await fastify.listen(3000)
      } catch (err) {
        fastify.log.error(err)
        process.exit(1)
      }
    }
    start()
  • AdonisJS: 一個基於TypeScript的全功能框架,高度關注開發人員的體驗和穩定性。Adonis是最快的Node.js Web框架之一。

    // PostsController.js
    import Post from 'App/Models/Post'
    
    export default class PostsController {
    
      public async index () {
        return Post.all()
      }
    
      public async store ({ request }) {
        return request.body()
      }
    
    }
  • FeatherJS: Feathers是一個輕量級的Web框架,用於使用JavaScript或者TypeScript建立實時應用程式和REST API。在幾分鐘內構建原型程式,在幾天內構建企業級應用程式。

    // app.ts
    import feathers from '@feathersjs/feathers';
    
    interface Message {
      id?: number;
      text: string;
    }
    
    
    class MessageService {
      messages: Message[] = [];
    
      async find () {
        return this.messages;
      }
    
      async create (data: Pick<Message, 'text'>) {
        const message: Message = {
          id: this.messages.length,
          text: data.text
        }
    
        this.messages.push(message);
    
        return message;
      }
    }
    
    const app = feathers();
    
    app.use('messages', new MessageService());
    
    app.service('messages').on('created', (message: Message) => {
      console.log('A new message has been created', message);
    });
    
    const main = async () => {
      await app.service('messages').create({
        text: 'Hello Feathers'
      });
    
      await app.service('messages').create({
        text: 'Hello again'
      });
    
      const messages = await app.service('messages').find();
    
      console.log('All messages', messages);
    };
    
    main();
  • Loopback.io: 使構建複雜整合的現代應用程式變得更加容易。

    // hello.controller.ts
    import {get} from '@loopback/rest';
    export class HelloController {
      @get('/hello')
      hello(): string {
        return 'Hello world!';
      }
    }
  • Meteor: 一個非常強大的全棧框架,提供同構的方法來使用JavaScript構建應用程式,在使用者端和伺服器端共用程式碼。以前提供全套的現成工具,現在與前端庫React、Vue和Angular整合。也可用於建立移動應用程式。

  • Micro: 它提供非常輕量級的伺服器來建立非同步HTTP微服務。

    // index.js
    const https = require('https');
    const {run, send} = require('micro');
    
    const {key, cert, passphrase} = require('openssl-self-signed-certificate');
    
    const PORT = process.env.PORT || 3443;
    
    const options = {key, cert, passphrase};
    
    const microHttps = fn => https.createServer(options, (req, res) => run(req, res, fn));
    
    const server = microHttps(async (req, res) => {
        send(res, 200, {encrypted: req.client.encrypted});
    });
    
    server.listen(PORT);
    console.log(`Listening on https://localhost:${PORT}`);
  • Nx: 使用NestJS、Express、React、Angular等進行全棧monorepo開發的工具包,Nx有助於將您的開發從一個團隊構建一個應用程式擴充套件到多個團隊共同作業開發多個應用程式!

  • Sapper: Sapper是一個用於構建各種規模的Web應用程式框架,具有出色的開發體驗和靈活的基於檔案系統的路由,提供SSR等等。

  • Socket.io: 用於構建實時網路應用程式的WebSocket框架。

    // index.js
    const express = require('express');
    const app = express();
    const http = require('http');
    const server = http.createServer(app);
    const { Server } = require("socket.io");
    const io = new Server(server);
    
    app.get('/', (req, res) => {
      res.sendFile(__dirname + '/index.html');
    });
    
    io.on('connection', (socket) => {
      console.log('a user connected');
    });
    
    server.listen(3000, () => {
      console.log('listening on *:3000');
    });
  • Strapi: Strapi是一種靈活的開源無頭CMS,它讓開發人員可以自由選擇自己喜歡的工具和框架,同時允許編輯者輕鬆管理他們的內容。

以上就是我推薦的Node.js Web框架和工具,如果有更好的推薦歡迎在評論區評論。

更多node相關知識,請存取:!

以上就是推薦分享Node.js中18個值得了解的Web框架和工具的詳細內容,更多請關注TW511.COM其它相關文章!