运行 https 上的 svelte 开发人员

Question

我正在使用它的模板 (https://github.com/sveltejs/template/) 作为起点来试验 svelte。

我想用 https://github.com/nimiq/qr-scanner 扫描二维码，但我的电脑上没有网络摄像头，而且我的 phone 不想启动 qrScanner，因为页面不存在由 https 提供。

当我运行 npm run dev 我得到：

  Your application is ready~! 

  - Local:      http://0.0.0.0:5000
  - Network:    http://192.168.1.13:5000

────────────────── LOGS ──────────────────

我的rollup.config.js:

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import { string } from "rollup-plugin-string";

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;

    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require("child_process").spawn(
                "npm",
                ["run", "start", "--", "--dev"],
                {
                    stdio: ["ignore", "inherit", "inherit"],
                    shell: true,
                }
            );

            process.on("SIGTERM", toExit);
            process.on("exit", toExit);
        },
    };
}

export default {
    input: "src/main.js",
    output: {
        sourcemap: true,
        format: "iife",
        name: "app",
        file: "public/build/bundle.js",
    },
    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: (css) => {
                css.write("public/build/bundle.css");
            },
        }),
        string({
            include: "node_modules/qr-scanner/qr-scanner-worker.min.js",
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration -
        // consult the documentation for details:
        // https://github.com/rollup/plugins/tree/master/packages/commonjs
        resolve({
            browser: true,
            dedupe: ["svelte"],
        }),
        commonjs(),

        // 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(),
    ],
    watch: {
        clearScreen: false,
    },
};

和包裹json:

{
    "name": "myapp",
    "version": "0.0.1",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w",
        "start": "HTTPS=true sirv public --single --host"
    },
    "devDependencies": {
        "@rollup/plugin-commonjs": "^14.0.0",
        "@rollup/plugin-node-resolve": "^8.0.0",
        "rollup": "^2.33.2",
        "rollup-plugin-livereload": "^1.0.0",
        "rollup-plugin-string": "^3.0.0",
        "rollup-plugin-svelte": "^6.1.1",
        "rollup-plugin-terser": "^6.1.0",
        "svelte": "^3.29.7"
    },
    "dependencies": {
        "graphql": "^15.4.0",
        "graphql-request": "^3.3.0",
        "jshashes": "^1.0.8",
        "page.js": "^4.13.3",
        "qr-scanner": "^1.2.0",
        "sirv-cli": "^1.0.8"
    }
}

Answer 1

我以前遇到过这个问题，解决方法是让chrome/firefox允许通过HTTP访问摄像头

试试这个 answer

或者，网上有关于如何为本地主机添加证书以在 HTTPS 上提供服务的教程

Answer 2

所以我想通了，svetle-template 与 sirv-cli 一起提供。

它有参数：--http2 --cert cert.pem --key key.pem

运行 https 上的 svelte 开发人员

running svelte dev on https

rollupjs

svelte