如何将 Sapper 添加到现有的 Svelte 项目中？

Posted 2023-03-13

【中文标题】如何将 Sapper 添加到现有的 Svelte 项目中？

【英文标题】：How to add Sapper to existing Svelte project?

【发布时间】：2021-04-15 07:34:24

【问题描述】：

我在 svelte 中有广泛的应用，以后我需要在它上面附加一个工兵以进行进一步的工作，可能吗？我尝试通过：

npm i @sapper

但是当我尝试从这个包中导入一些东西时，例如：

import  goto  from '@sapper/app';

编译器告诉我我不依赖这个工兵方法:(

我不知道如何将工兵附加到我的项目中

我的汇总

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";
// library that helps you import in svelte with
// absolute paths, instead of
// import Component  from "../../../../components/Component.svelte";
// we will be able to say
// import Component from "components/Component.svelte";
import alias from "@rollup/plugin-alias";

const production = !process.env.ROLLUP_WATCH;

// configure aliases for absolute imports
const aliases = alias(
  resolve: [".svelte", ".js"], //optional, by default this will just look for .js files or folders
  entries: [
     find: "components", replacement: "src/components" ,
     find: "views", replacement: "src/views" ,
     find: "assets", replacement: "src/assets" ,
  ],
);

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("bundle.css");
      ,
    ),

    // 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(),

    // for absolut imports
    // i.e., instead of
    // import Component  from "../../../../components/Component.svelte";
    // we will be able to say
    // import Component from "components/Component.svelte";
    aliases,
  ],
  watch: 
    clearScreen: false,
  ,
;

我的 package.json：

  "name": "svelte-app",
  "version": "1.0.0",
  "scripts": 
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public -s",
    "build:tailwind": "tailwind build public/assets/styles/index.css -o public/assets/styles/tailwind.css",
    "build:fontawesome": "mkdir -p public/assets/vendor/@fortawesome/fontawesome-free/webfonts && mkdir -p public/assets/vendor/@fortawesome/fontawesome-free/css && cp -a ./node_modules/@fortawesome/fontawesome-free/webfonts public/assets/vendor/@fortawesome/fontawesome-free/ && cp ./node_modules/@fortawesome/fontawesome-free/css/all.min.css public/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf public/build && npm install && npm run build:tailwind && npm run build:fontawesome && npm run dev"
  ,
  "devDependencies": 
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-node-polyfills": "^0.2.1",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  ,
  "dependencies": 
    "@fortawesome/fontawesome-free": "5.14.0",
    "@popperjs/core": "2.5.1",
    "@rollup/plugin-alias": "3.1.1",
    "@rollup/plugin-replace": "^2.3.4",
    "@tailwindcss/custom-forms": "0.2.1",
    "body-parser": "^1.19.0",
    "chart.js": "2.9.3",
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "fontawesome-svelte": "^2.0.1",
    "node-fetch": "^2.6.1",
    "node-sass": "^5.0.0",
    "page": "^1.11.6",
    "polka": "^0.5.2",
    "rollup-plugin-scss": "^2.6.1",
    "session-file-store": "^1.5.0",
    "sirv": "^1.0.10",
    "sirv-cli": "1.0.6",
    "svelte-routing": "1.4.2",
    "tailwindcss": "1.8.10"
  

【问题讨论】：

嗨！您应该尝试开始一个新的工兵项目，然后在这个新项目中添加您现有的组件。 sapper.svelte.dev/docs#Getting_started

【参考方案1】：

我一直在寻找这个答案，我认为@Romain Durand 的答案是最接近的，我认为我们不能将 ssaper 添加到现有的苗条项目中。我必须在 ssaper 中初始化项目并使用 svelte。