📜  编辑时自动编译nodejs - Javascript(1)

📅  最后修改于: 2023-12-03 15:11:43.054000             🧑  作者: Mango

编辑时自动编译nodejs - Javascript

对于Node.js开发者来说,每次修改JavaScript代码时需要手动运行Node.js来进行重新编译,这样很浪费时间并且不方便。好在我们可以使用一些插件来实现编辑时自动编译的功能,本篇文章将介绍一些常用的插件。

nodemon

nodemon是一个很流行的工具,它会在你修改了代码后自动重启Node.js服务。它可以帮助你快速重启服务,不需要每次手动编译代码或者重新启动服务。nodemon支持所有的Node.js应用程序,它使用简单,只需要在你的终端上输入nodemon后,就可以自动重启你的服务。

# 安装nodemon
npm install -g nodemon

# 启动nodemon
nodemon app.js
gulp

gulp是一个构建工具,他可以帮助我们自动化构建任务。gulp中有一个非常重要的插件gulp-watch,它可以监听文件的变化,使得我们的程序可以在文件发生修改之后即时进行编译并运行。gulp也可以通过gulp-nodemon来进行自动重启服务。

const nodemon = require('gulp-nodemon');

gulp.task('nodemon', function (cb) {
  var started = false;
  return nodemon({
    script: './app.js'
  }).on('start', function () {
    if (!started) {
      cb();
      started = true; 
    } 
  });
});
webpack

webpack是一个优秀的前端打包工具,能够将多个JavaScript文件打包成一个文件,实现模块化。webpack有一个插件webpack-dev-server,能够在前端开发中实现快速开发和热更新。

// webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devServer: {
    contentBase: './dist',
    port: 3000,
    hot: true,
  },
};

// package.json

"scripts": {
  "start": "webpack-dev-server --open"
},

以上是一些常用的自动编译工具,可以帮助我们提升开发效率。 确保按照各自的使用方式正确地安装和配置它们即可享受到它们的好处。