Sapper 开源项目教程

Sapper 开源项目教程

sapperThe next small thing in web development, powered by Svelte项目地址:https://gitcode.com/gh_mirrors/sa/sapper

1. 项目的目录结构及介绍

Sapper 项目的目录结构如下：

/sapper-project
├── src
│   ├── routes
│   │   ├── index.svelte
│   │   ├── about.svelte
│   │   └── _error.svelte
│   ├── client.js
│   ├── server.js
│   ├── template.html
│   └── service-worker.js
├── static
│   ├── favicon.png
│   └── global.css
├── rollup.config.js
├── package.json
└── README.md

目录结构介绍

• src/：包含项目的源代码。
  • routes/：存放页面组件，每个 .svelte 文件对应一个路由。
  • client.js：客户端入口文件。
  • server.js：服务器入口文件。
  • template.html：HTML 模板文件。
  • service-worker.js：服务工作者文件，用于离线支持。
• static/：存放静态资源文件，如图片和全局样式。
• rollup.config.js：Rollup 配置文件。
• package.json：项目的依赖和脚本配置。
• README.md：项目说明文档。

2. 项目的启动文件介绍

client.js

client.js 是客户端的入口文件，负责初始化客户端应用。

import * as sapper from '@sapper/app';

sapper.start({
  target: document.querySelector('#sapper')
});

server.js

server.js 是服务器端的入口文件，负责启动服务器。

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

polka()
  .use(
    compression({ threshold: 0 }),
    sirv('static', { dev }),
    sapper.middleware()
  )
  .listen(PORT, err => {
    if (err) console.log('error', err);
  });

3. 项目的配置文件介绍

rollup.config.js

rollup.config.js 是 Rollup 的配置文件，用于打包项目。

import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';

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({
      compilerOptions: {
        dev: !production
      }
    }),
    css({ output: 'bundle.css' }),
    resolve({
      browser: true,
      dedupe: ['svelte']
    }),
    commonjs(),
    !production && serve(),
    !production && livereload('public'),
    production && terser()
  ],
  watch: {
    clearScreen: false
  }
};

package.json

package.json

sapperThe next small thing in web development, powered by Svelte项目地址:https://gitcode.com/gh_mirrors/sa/sapper