让我们使用ES6设置Express.js应用程序。我将使用Babel编译器将我们的ES6代码编译为ES5。 Babel是一个JavaScript编译器，今天可以使用下一代JavaScript。本教程假设您已经在开发环境中安装了节点软件包管理器（NPM）和Node.js引擎。如果您没有安装node.js，则可以从Node.js website下载并安装它。另外，如果您对此ES6节点表达式板，则可以下载完整的代码库here。
步骤1：设置项目
- 为您的项目创建一个新目录并导航到它。
- 通过在终端中运行以下命令来初始化一个新的node.js项目：
npm init -y
步骤2：安装依赖项
- 通过运行以下命令来安装Express和其他必需的软件包：
npm install express
步骤3：配置Babel
- 通过运行以下命令来安装babel和必要的插件：
npm install --save-dev @babel/core @babel/preset-env @babel/register
- 在项目的根目录中创建一个名为.babelrc的文件，并添加以下内容：
{
"presets": ["@babel/preset-env"]
}
步骤4：创建Express App
- 在项目的根目录中创建一个名为app.js的文件。
- 将以下代码添加到app.js以设置基本的Express应用程序：
import express from 'express';
const app = express();
// Define routes and middleware here
const port = process.env.PORT || 3000;
app.listen(port, () => {
console.log(`Server listening on port ${port}`);
});
在您的终端中，运行以下命令以启动服务器：
node -r @babel/register app.js
步骤5：安装Nodemon
- 通过在项目的根目录中运行以下命令来安装nodemon作为开发依赖性：
npm install --save-dev nodemon
- 打开您的项目的package.json文件，然后修改“脚本”部分，以使用nodemon（
"start": "nodemon --exec babel-node app.js"）来包含一个名为“ start”的新脚本“ start”，以运行服务器。您的package.json文件应该看起来像this：
{
"name": "express-amazon-cognito",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon --exec babel-node app.js",
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"@babel/core": "^7.22.1",
"@babel/node": "^7.22.1",
"@babel/preset-env": "^7.22.4",
"@babel/register": "^7.21.0",
"nodemon": "^2.0.22"
}
}
-
将更改保存到package.json。
-
打开终端并导航到项目的根目录。
-
使用以下命令启动服务器：
npm start or yarn start
现在，Nodemon将自动监视您的文件以进行更改，并在保存对代码的更改时重新启动服务器。
步骤6：设置更漂亮和Eslint
- 将必要软件包安装为DEV依赖项：
npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier
- 通过运行以下命令并按照提示来创建ESLINT配置文件：
npx eslint --init
此命令将指导您设置ESLINT。提示时进行以下选择：
- How would you like to configure ESLint? -> Use a popular style guide
- Which style guide do you want to follow? -> Airbnb
- Do you use TypeScript? -> No
- Where will your code run? -> Node
- How would you like to define a style for your project? -> Use a configuration file
- Which format do you want your config file to be in? -> JavaScript
- 安装必要的Babel Eslint插件：
npm install --save-dev babel-eslint
- 打开项目根目录中创建的.eslintrc.js文件。 修改配置文件以扩展插件：漂亮/推荐的配置，并将解析器选项设置为babel-eslint。它应该看起来像这样（source file）：
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['airbnb-base', 'plugin:prettier/recommended'],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
rules: {
'prettier/prettier': 'error',
},
};
- 在项目的根目录中创建一个.prettierrc file，并指定所需的更漂亮的格式规则。
{
"singleQuote": true,
"trailingComma": "es5"
}
- 将更漂亮的脚本添加到您的软件包。JSON文件的“脚本”部分：
"scripts": {
"prettier": "prettier --write '**/*.{js,json}'"
}
现在，您可以在项目上运行Eslint和更漂亮。例如，要在整个项目上运行ESLINT，请使用以下命令：
npx eslint .
要使用漂亮的代码格式化，请运行以下命令：
npm run prettier
随时调整ESLINT和更漂亮的配置以满足您的特定项目要求。
步骤7：设置Env
- 安装dotenv软件包，该软件包允许您从.env文件加载环境变量：
npm install dotenv
- 在项目的根目录中创建.ENV文件。将以下行添加到.env文件，指定所需的端口号：
PORT=3000
- 在您的主条目文件（例如app.js或index.js）中，使用文件顶部的ES6语法导入dotenv软件包：
import dotenv from 'dotenv';
- 通过在dotenv对象上调用config方法来加载来自.env文件的环境变量：
dotenv.config();
- 更新定义express.js服务器端口的代码。使用破坏性从process.env提取端口变量：
const port = process.env.PORT || 3000;
在此示例中，端口变量将从.env文件中保存该值。如果未设置，则端口变量将默认为3000。
- 使用端口变量启动Express.js服务器：
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
现在，您的Express.js服务器将使用ES6语法从.env文件中读取端口号。
您可以调整代码和语法以匹配您的特定项目结构和要求。
您可以下载本文的完整代码库here。