Svelte Hacker News 克隆项目教程

Svelte Hacker News 克隆项目教程

hn.svelte.devHacker News clone built with Svelte and Sapper项目地址:https://gitcode.com/gh_mirrors/hn/hn.svelte.dev

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

hn.svelte.dev/
├── src/
│   ├── routes/
│   │   ├── index.svelte
│   │   ├── about.svelte
│   ├── app.html
│   ├── client.js
│   ├── server.js
├── static/
│   ├── images/
│   ├── favicon.png
├── dockerignore
├── gcloudignore
├── gitignore
├── Dockerfile
├── LICENSE
├── Makefile
├── README.md
├── package-lock.json
├── package.json
├── rollup.config.js

目录结构介绍

• src/: 包含项目的源代码。
  • routes/: 包含应用的路由组件。
    • index.svelte: 主页组件。
    • about.svelte: 关于页面组件。
  • app.html: 应用的模板文件。
  • client.js: 客户端入口文件。
  • server.js: 服务器入口文件。
• static/: 包含静态资源文件。
  • images/: 图片文件夹。
  • favicon.png: 网站图标。
• dockerignore: Docker 忽略文件。
• gcloudignore: Google Cloud 忽略文件。
• gitignore: Git 忽略文件。
• Dockerfile: Docker 配置文件。
• LICENSE: 项目许可证。
• Makefile: Makefile 配置文件。
• README.md: 项目说明文档。
• package-lock.json: npm 锁定文件。
• package.json: 项目依赖和脚本配置文件。
• rollup.config.js: Rollup 配置文件。

2. 项目的启动文件介绍

client.js

import './global.css';
import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'world'
  }
});

export default app;

• client.js: 客户端入口文件，负责初始化 Svelte 应用并挂载到 DOM 中。

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);
  });

• server.js: 服务器入口文件，负责配置服务器和中间件，启动服务器。

3. 项目的配置文件介绍

package.json

{
  "name": "hn.svelte.dev",
  "version": "1.0.0",
  "scripts": {
    "build": "sapper build --legacy",
    "dev": "sapper dev",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build"
  },
  "dependencies": {
    "compression": "^1.7.4",
    "polka": "^0.5.2",
    "sirv": "^1.0.0"
  },
  "devDependencies": {
    "sapper": "^0.28.0",
    "svelte": "^3.29.0"
  }
}

• package.json: 项目依赖和脚本配置文件，包含项目的名称、版本、脚本命令和依赖包。

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';

const production = !process.env.ROLLUP_WATCH

hn.svelte.devHacker News clone built with Svelte and Sapper项目地址:https://gitcode.com/gh_mirrors/hn/hn.svelte.dev