我可以让这个工作流程更快吗？ Rollup watch / npm live-server答案

【问题标题】：Can I make this workflow faster? Rollup watch / npm live-server我可以让这个工作流程更快吗？ Rollup watch / npm live-server
【发布时间】：2020-06-11 12:35:24
【问题描述】：

我正在尝试为我即将构建的网站实现“实时”工作流程。

它基于this boilerplate。

我目前有这个工作流程：

编写代码 -> 保存 -> 'Rollup watch' 从 src/main.js 重建 build/main.js -> 'live-server' 刷新浏览器。

我对这方面很陌生，所以老实说，每次构建所需的 8 秒 比我的旧工作流程快得多，后者涉及手动fileZilla 和一个在密码保护的子域上开发的新手。

有没有办法我应该这样做，这样我就不会等待构建发生 - 这似乎没有必要？例如。使用临时链接到 src/main.js 的虚拟 index.html，直到我准备好构建捆绑版本并将其部署到我的域？

这是样板的当前 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example for Three JS</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>
    <div id="homepage"></div>

    <script src='build/main.js'></script>

    <script>
        const app = new LIB.App;
        app.init();
    </script>

</body>
</html>

这是我的汇总配置文件的样子：

import resolve from '@rollup/plugin-node-resolve'; // locate and bundle dependencies in node_modules (mandatory)
import { terser } from "rollup-plugin-terser"; // code minification (optional)

export default {
    input: 'src/main.js',
    output: [
        {
            format: 'umd',
            name: 'LIB',
            file: 'build/main.js'
        }
    ],
    plugins: [ resolve(), terser() ]
};

我尝试从

切换出脚本源

<script src='build/main.js'></script>

到

<script src='src/main.js'></script>

并删除：

<script>
    const app = new LIB.App;
    app.init();
</script>

但这不起作用 - 所以我在这里寻找输入。

【问题讨论】：

标签： rollup rollupjs npm-live-server

【解决方案1】：

“答案”是我应该一直使用我的汇总构建的开发和生产版本。开发版本应该已删除缩小。

来自Documentation：

如果您愿意，可以指定与默认 rollup.config.js 不同的配置文件：

rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js

【讨论】：