使用`NodeJS`在前端项目中动态添加参数

使用NodeJS在项目中动态添加参数

需求

在页面中显示代码的构建（打包）时间

解决思路

首先定义一个文件build_time.js

改文件可以是空文件，然后在创建一个js文件generateBuildTime.js,然后在该文件中写入代码动态添加参数，然后把需要生成的代码内容添加到该文件

const fs = require("fs");
let text = `export default ${new Date().valueOf()}`;
fs.writeFile("./src/utils/buildTime.js", text, () => {});

然后在需要用的地方直接引入buildTime.js文件，使用默认暴露的时间戳即可

然后现在就需要去调用这个generateBuildTime脚本生成文件，有两种方法：

1. 在package.json中配置npm脚本

   "scripts": {
       "serve": "node src/utils/genarateBuildTime.js && vue-cli-service serve",
       "build": "node src/utils/genarateBuildTime.js && vue-cli-service build"
   },
   

2. 直接在项目的配置文件中引入该脚本，该脚本会在编译或者打包的时候执行

   以vue-cli项目为例:

   直接在vue.config.js中引入执行该脚本

   // 每次编译打包之前设置打包时间
   require("./src/utils/genarateBuildTime");