如何设置ROLLUP，使Svelte项目在保存时自动编译，而无需提供服务？ [英] How to set up rollup so that a Svelte project is automatically compiled on save without being served?

问题描述

在Svelte项目中，package.json文件中已经设置了三个脚本

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --single"
  },

我对rollup.config.js文件的理解

• 运行npm run build会将项目编译到public文件夹中并将文件缩小一次
• 运行npm run dev无需缩小即可编译，并在编译后自动运行npm run start，因此公用文件夹将在更改时提供并重新加载

因为我使用的是Firebase模拟器，其中包括模拟公共目录的托管和服务，所以我正在寻找一种方法，在保存时只自动编译Svelte项目，而不使用服务~我如何实现这一点？

编辑：如何通过修改rollup.config以添加其他脚本(例如"autobuild": "...")轻松在不同模式之间切换来实现这一点？

推荐答案

如default Rollup config file for a Svelte project的plugins部分所示，汇总有条件地执行以下3个步骤：

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    production && terser()

为了防止您的站点被自动服务，并且您的浏览器自动刷新，您只需注释掉前两个步骤。在仍然设置监视标志(-w)的情况下，如果您使用npm run dev启动项目，则项目仍将在保存时自动重建。

如果您始终希望缩小文件，则可以在第三步中删除环境条件。

因此您的plugins部分的结尾将改为如下所示：

    // In dev mode, call `npm run start` once
    // the bundle has been generated
    // !production && serve(),

    // Watch the `public` directory and refresh the
    // browser on changes when not in production
    // !production && livereload('public'),

    // If we're building for production (npm run build
    // instead of npm run dev), minify
    // production && terser()
    terser()

此外，如果这些更改是永久性的，并且您知道您永远不需要热服务内容，则可以删除配置文件顶部附近的serve()函数定义，以及删除rollup-plugin-livereload的import语句(它提供livereload()函数)。

这篇关于如何设置ROLLUP，使Svelte项目在保存时自动编译，而无需提供服务？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！