使用 Express 入门 ES6 JavaScript，进行 Node.js 开发
你是否曾经沉迷于使用 ES6 JavaScript 进行前端开发，并希望也能将其用于后端 Node.js 项目？本文将指导你如何设置 Babel 转译器，从而弥合现代 JavaScript 和旧版 Node.js 环境之间的鸿沟。
虽然 TypeScript 提供了许多优势，但 JavaScript 对许多开发者来说仍然是一个有效的选择。
先决条件
以下是您在学习本教程时需要遵循的一些要求：
-
您的系统已安装Node.js v14或更高版本。
-
代码编辑器或IDE：我推荐VSCode。
-
具备 JavaScript 和Express.js的基础知识。
-
用于测试我们实现的 API 客户端：我推荐Insomnia。
什么是ES6？
ES6 指的是 ECMAScript 编程语言的第 6 个版本。ECMAScript 是 JavaScript 的标准化名称，版本 6 是继 2011 年发布的版本 5 之后的下一个版本。
它显著增强了 JavaScript 语言，并添加了许多新特性，从而简化了大规模软件开发。点击此处
了解更多信息。
巴别塔是什么？
Babel 是一个工具链，主要用于将 ECMAScript 2015+ (ES6+) 代码转换为在当前和旧版浏览器或环境中向后兼容的 JavaScript 版本。
这也意味着，在编写Node.js应用程序时，您可以使用Babel将我们的ES6代码转换为向后兼容的代码。
一段用于导入的普通 JavaScript 代码片段express如下所示：
var express = require('express')
使用 ES6 语法时，你只需要像这样导入你的包：
import express from 'express'
使用 Node.js、Express 和 ES6 构建待办事项 API 🤸
我们将使用 NPM（Node.js 自带）作为包管理器，您也可以
yarn根据自己的喜好使用其他包管理器。
项目设置
mkdir todo-api
cd todo-api
npm init -y
这有助于初始化一个新的节点项目，并为我们的应用程序安装必要的软件包。
要安装 Babel 及其所需的依赖项，请打开终端并执行以下命令。
我们将使用 Babel 工具将现代 ES6 代码转换为与旧版 Node.js 兼容的旧版 ES5 代码。
npm i @babel/cli @babel/core @babel/node @babel/preset-env --save-dev
npm i @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread --save-dev
npm i rimraf nodemon --save-dev
安装完所有软件包后，如果您之前没有打开过文件夹，请使用您喜欢的编辑器打开它。
我们将编辑该package.json文件，继续进行应用程序运行的设置，并构建可部署到任何托管平台的代码。
我们将更新文件中的脚本部分package.json以完成设置。
它应该长这样👇
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf dist && babel src --out-dir dist --copy-files",
"start": "node dist/app.js",
"start:dev": "nodemon --exec babel-node src/app.js"
},
以下是文件scripts中属性的详细说明package.json：
scripts文件中的属性允许package.json您定义可直接从命令行执行的自定义命令。
这简化了运行常见任务的过程，例如启动开发服务器、构建项目、运行测试或代码检查。
-
构建：此命令使用 Babel 生成 ES6 代码，并将输出写入 dist 目录（每次构建时都会自动删除并重新创建）。dist 目录包含与根目录完全相同的文件和文件夹。唯一的区别在于，它包含从 ES6 转译为 ES5 的代码。
-
start：此命令将我们的 node.js 应用程序转换为 dist 目录中的 ES5 代码后启动它。
-
start:dev：此命令使用 nodemon 启动我们的应用程序（这有助于在任何 JavaScript 文件更改时自动重启服务器），并使用 babel-node 将内存中的所有 ES6 代码转换为 ES5。在生产环境中，您不希望这样做。因此，我们提供了 build 命令以获得更优化的性能。
接下来，我们在应用程序的根目录下创建一个.babelrc文件；该文件用于添加 Babel 包的配置，以确保其正常工作。
将以下代码复制到该文件中。
{
"presets": [
["@babel/env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
]
}
点击此链接了解更多关于使用 Babel 的信息。
安装 Express.js：
npm install express cors
-
Express：一个流行的Node.js Web框架。
-
Cors：用于启用 CORS（跨域资源共享）的中间件。
创建src文件夹和所需文件：
mkdir src
touch app.js
touch store.js
在终端中运行每一行代码。
最后，您的项目结构应如下所示：
todo-api/
├── src/
│ ├── app.js # API entry point
│ ├── store.js # In-memory data store
├── .babelrc # Babel configuration
├── package.json # Project metadata and dependencies
└── README.md # Project documentation
更新store.js文件
我们使用内存存储来存储数据，因为它非常适合开发和测试。
let todos = [];
let idCounter = 1;
export const getTodos = () => todos;
export const addTodo = (title) => {
const todo = { id: idCounter++, title, completed: false };
todos.push(todo);
return todo;
};
export const updateTodo = (id, updates) => {
const todo = todos.find((t) => t.id === id);
if (!todo) return null;
Object.assign(todo, updates);
return todo;
};
export const deleteTodo = (id) => {
const index = todos.findIndex((t) => t.id === id);
if (index !== -1) {
todos.splice(index, 1);
return true;
}
return false;
};
-
getTodos：以数组形式检索所有待办事项。
-
addTodo：创建一个新的待办事项并将其添加到待办事项列表中。
-
updateTodo：通过 ID 更新现有待办事项。
-
deleteTodo：根据 ID 从待办事项中删除记录。
更新 app.js 文件
import express from 'express';
import { getTodos, addTodo, updateTodo, deleteTodo } from './store.js';
const app = express();
app.use(json())
const PORT = process.env.PORT || 3000;
// Routes
app.get('/todos', (req, res) => {
res.json(getTodos());
});
app.post('/todos', (req, res) => {
const { title } = req.body;
if (!title) {
return res.status(400).json({ error: 'Title is required' });
}
const todo = addTodo(title);
res.status(201).json(todo);
});
app.put('/todos/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const updates = req.body;
const updatedTodo = updateTodo(id, updates);
if (!updatedTodo) {
return res.status(404).json({ error: 'Todo not found' });
}
res.json(updatedTodo);
});
app.delete('/todos/:id', (req, res) => {
const id = parseInt(req.params.id, 10);
const success = deleteTodo(id);
if (!success) {
return res.status(404).json({ error: 'Todo not found' });
}
res.status(204).end();
});
// Start server
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});
运行服务器
npm run start:dev
你应该会看到类似这样的内容。
在失眠症上测试我们的实现
基本 URL 将http://localhost:3000基于我的项目配置。
创建新待办事项
获取所有待办事项
更新待办事项
删除待办事项
如果您遇到任何问题，请确保您已准确按照所有步骤操作。如果您仍然遇到问题，请在下方留言，我将很乐意为您提供帮助。
您可以根据自己的喜好，使用任何架构或 Web 框架（例如 Fastify）来扩展此项目。添加数据库也是一个可选方案。一切都取决于您。
ES6 特性的主要优势🎯
- 箭头函数：简洁的函数定义语法。
- 解构：用于从对象和数组中提取值。
- 模板字面量：用于创建包含嵌入式表达式的字符串。
- Async/Await：用于异步操作，使代码更易读。
感谢你一路陪伴。🫡
- 请与我分享您的 ES6 使用经验，我们一起在评论区交流吧。
- 请将这篇文章分享给您认为会从我的经验中受益的人。谢谢！🎉
您可以在GitHub上找到本文的代码库。