如何使用 ESLint、EJS 和在 TypeScript 服务器更改时重启来创建 TypeScript + NodeJS Express 项目
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
从一个干净的项目开始
pnpm init
or
npm init -y
安装一些依赖项
pnpm add -save-dev eslint @types/node @types/express typescript ts-node-dev
pnpm add --save express ejs
or
npm install -save-dev eslint @types/node @types/express typescript ts-node-dev
npm install --save express ejs
为你的项目创建一个新文件夹
mkdir src
touch src/app.ts
src/app.ts
import express from 'express';
const app = express();
const port = 3000;
app.use(express.json());
app.use(express.static("public"));
app.set("view engine", "ejs");
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
return console.log(`http://localhost:${port}`);
});
为您的公共文件夹创建一个新文件夹
创建一个新的视图文件夹。
创建 tsconfig.json 文件
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist"
},
"lib": [
"es2015"
]
}
现在我们将运行 eslint 的初始化命令，以交互方式设置项目：
npx eslint --init
现在您需要回答一些问题才能完成初始化过程：
- 你想如何使用 ESLint？：检查语法并查找问题
- 您的项目使用了哪种类型的模块？：JavaScript 模块（导入/导出）
- 您的项目使用了哪个框架？：以上都不是
- 你的项目是否使用 TypeScript？：是
- 你的代码运行在哪里？：Node
- 您希望配置文件采用什么格式？：JavaScript
最后，系统会提示您安装一些额外的 eslint 库。选择“是”。安装过程完成后，您将得到以下配置文件：
现在我们将使用 ts-node-dev 来监视 TypeScript 服务器文件的更改
由于我们已经安装了开发依赖项，所以我们不需要做太多事情，只需要在 package.json 文件中添加启动脚本即可。
让我们修改 package.json 文件并添加一些代码行。
添加主
"main": "dist/app.js",
添加 lint 并启动脚本
"lint": "eslint . --ext .ts",
"start": "ts-node-dev src/app.ts"
最终它应该看起来像这样
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "eslint . --ext .ts",
"start": "ts-node-dev src/app.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/express": "^4.17.13",
"@types/node": "^18.0.0",
"@typescript-eslint/eslint-plugin": "^5.30.0",
"@typescript-eslint/parser": "^5.30.0",
"eslint": "^8.18.0",
"ts-node-dev": "^2.0.0",
"typescript": "^4.7.4"
},
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.1"
}
}
现在使用 pnpm 或 npm 启动项目
pnpm start
or
npm start
恭喜你获得新项目！🎉
在 Twitter 上关注我：- Twitter 🤝🏻
欢迎访问我的 GitHub 查看精彩项目：- GitHub 🤝🏻
在领英上联系我：- Linkedin 🤝🏻
请阅读我的另一篇文章：《
在 Next.js 中使用 React-Scroll-Parallax 实现视差效果》😉