node.js实现代码热更新及打包成js单文件

一、如何实现代码热更新？

1.1、什么是代码热更新

代码热更新是指在项目运行过程中，无需停止或重新启动项目即可更新代码，从而实现快速开发，减少中断开发者的时间。

1.2、安装Nodemon

在你的项目中安装 nodemon。

npm install nodemon --save-dev

1.3、配置脚本（可选）

你可以在 package.json 文件中的 scripts 部分中添加一个脚本来运行 nodemon。

"scripts": {
  "start": "node index.js", // index.js 为你项目的主文件
  "dev": "nodemon index.js"
}

如图所示：

在这个例子中，我在 scripts 中添加了一个名为 "dev" 的脚本，它使用 nodemon 来运行 index.js 文件。现在，你可以通过运行以下命令来启动项目。

npm run dev

1.4、测试

修改你项目中的内容然后保存测试。例如可以写一个接口返回 hello world，然后修改为 hello 保存并调用看是否修改成功。

二、如何使用webpack打包

2.1、什么是 webpack

虽然 Webpack 最初是为前端项目设计的，但也可以用于打包 Node.js 后端项目。在 Node.js 项目中使用 Webpack 的主要目的是为了将后端代码及其依赖打包成一个文件，以简化部署、提高性能。

2.2、安装webpack 和 webpack-cli

在你的项目中安装 webpack 和webpack-cli。

npm install webpack webpack-cli --save-dev

2.3、创建webpack.config.js

在你的项目根目录中创建 webpack.config.js 用于配置 Webpack。以下是一个简单的配置示例。

const path = require('path');

module.exports = {
    entry: './index.js',  // 入口文件
    target: 'node',       // 指定目标为Node.js
    output: {
        path: path.resolve(__dirname, 'dist'),  // 输出目录
        filename: 'serve.js',  // 输出文件名
    },
    mode: 'development', // 或者 'production'
};

2.4、创建运行脚本命令

在 package.json 文件中添加一个脚本，以便运行 Webpack 打包。

"scripts": {
  "build": "webpack"
}

如图所示：

然后通过以下命令打包项目。

npm run build

这将在项目根目录下的 dist 文件夹下生成一个名为 serve.js 的打包文件。如下图所示：

三、小技巧【环境区分】

3.1、为什么要区分环境

区分环境的主要目的是为了在开发、测试和生产等不同阶段使用不同的配置，以确保应用程序在各个阶段都能够运行并表现良好。这有助于减少潜在的错误和问题，并提高应用的可维护性和稳定性。

3.2、安装 cross-env

cross-env 主要用于跨平台设置环境变量，而不依赖于 .env 文件。在项目根目录运行以下命令安装 cross-env 。

cross-env NODE_ENV=staging node index.js

3.3、配置不同的脚本命令

在 package.json 中配置脚本，用于运行或者打包项目。

"scripts": {
    "start": "nodemon index.js",
    "dev": "cross-env NODE_ENV=development nodemon index.js",
    "build": "cross-env NODE_ENV=production webpack"
  },

如图所示：

3.4、运行脚本测试

在你项目的主入口文件编写 console.log(process.env.NODE_ENV) 。

console.log(process.env.NODE_ENV)

然后通过运行以下命令测试是否配置成功。

npm dev

之后你就可以通过这个值来设置不同的配置。

---

关注我们的官方公众号获取更多源码示例