Node + Graphql 的世界：搭建 TypeScript + Webpack + Nodemon 的开发环境

在当今快速发展的互联网时代，全栈开发已成为一种趋势，而 Node.js 和 Graphql 的组合为我们提供了强大而灵活的开发环境。为了让你的开发之旅更加顺畅，我们将在本文中构建一个 TypeScript + Webpack + Nodemon 的开发环境。

## 前言

在开始之前，确保你已经安装了 Node.js 和 npm。你可以在 Node.js 官网上找到下载和安装指南。

## 步骤 1：安装依赖

首先，我们来安装必要的依赖项。打开终端，输入以下命令：

npm install -g typescript webpack webpack-cli nodemon

这将安装 TypeScript、Webpack、Webpack CLI 和 Nodemon。

## 步骤 2：创建文件目录

接下来，创建一个新的项目目录。你可以使用你喜欢的任何名称，比如 "node-graphql-project"。进入这个目录，再创建以下子目录：

- client
- server

## 步骤 3：配置 Webpack

在 "client" 目录中，创建一个名为 "webpack.config.js" 的文件，并输入以下内容：

const path = require('path');

module.exports = {
entry: './src/index.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.ts$/,
use: 'ts-loader',
},
],
},
resolve: {
extensions: ['.ts', '.js'],
},
};

这个配置文件告诉 Webpack 如何打包我们的 TypeScript 代码。

## 步骤 4：创建 Node.js 服务器

在 "server" 目录中，创建一个名为 "index.js" 的文件，并输入以下内容：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
res.send('Hello, world!');
});

app.listen(3000, () => {
console.log('Server is listening on port 3000');
});

这个简单的服务器将监听 3000 端口，并在收到请求时返回 "Hello, world!"。

## 步骤 5：配置 Nodemon

为了让我们的服务器在每次代码更改时自动重启，我们将使用 Nodemon。在终端中，进入 "server" 目录，然后输入以下命令：

nodemon index.js

这将启动 Nodemon 并监视 "index.js" 文件。

## 步骤 6：测试配置结果

现在，我们可以通过在 "client" 目录中运行以下命令来测试我们的配置：

npm run build

这将使用 Webpack 构建我们的 TypeScript 代码。

然后，在 "server" 目录中，我们可以通过运行以下命令来启动我们的服务器：

nodemon index.js

在浏览器中打开 "http://localhost:3000"，你应该会看到 "Hello, world!"。

## 总结

通过这篇文章，我们已经搭建了一个 TypeScript + Webpack + Nodemon 的开发环境。你现在可以开始使用这个环境来开发你的 Node 和 Graphql 项目了。

希望这篇文章对你有帮助！