都2021年了，还不会使用Svelte？那你就out了~

前言

由于公司最近业务原因，接了不少类似活动页、单个h5页面的这种需求。相对于传统的React与Vue框架开发来说，其本身无论项目内容与大小，其核心框架代码是必须的，而如果使用jquery这种古老的技术又非常影响开发效率与开发习惯不适应。因此，我研究了下针对一个小型项目的比较适合的开发框架，即，只有一至三个简单页面开发的这种小项目需求。一开始也是有考虑过Vue的多页面开发这种，不过，在发现了Svelte之后，我觉得有更值得尝试的方案了~

本来这两天就看到了不少关于Svelte的相关文章，一直也想抽时间研究下来着，结果今天上午又接到了一个这样的需求，正好整个下午又开部门复盘会，趁着开会的间隙我也简单的上手操作了下（ 狗头o(￣︶￣)o）~

介绍

• 中文官网
• 预处理管理工具：svelte-preprocess

Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』，也就是说，vue 和 react 这类传统的框架，都必须引入运行时 (runtime) 代码，用于虚拟dom、diff 算法。Svelte完全溶入JavaScript，应用所有需要的运行时代码都包含在bundle.js里面了，除了引入这个组件本身，你不需要再额外引入一个运行代码。

优势

• 没有运行时，更小的尺寸和打包体积
• 写更少的代码，对于实现相同功能的租价只需要更少的代码
• 优秀的性能

劣势

• 目前较小众，缺乏成熟的生态：UI组件库与单元测试等

原理

Svelte没有采用React的Jsx语法，而是采用了Templates语法（类似于 Vue 的写法），更加严格和具有语义性，可以在编译的过程中就进行优化操作。

项目配置及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 sveltePreprocess from "svelte-preprocess"
import typescript from "@rollup/plugin-typescript"
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.ts",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js",
  },
  plugins: [
    svelte({
      // https://github.com/sveltejs/svelte-preprocess
      // sveltePreprocess：Less、Sass、Postcss配置及Svelte preprocessor使用
      // globalStyle: { ... },
      //   replace: { ... },
      //   typescript: { ... },
      //   scss: { ... },
      //   sass: { ... },
      //   less: { ... },
      //   stylus: { ... },
      //   babel: { ... },
      //   postcss: { ... },
      //   coffeescript: { ... },
      //   pug: { ... },
      preprocess: sveltePreprocess({ 
        sourceMap: !production,
        less: true,
        postcss: {
          plugins: [require("autoprefixer")],
        },
      }),
      compilerOptions: {
        // 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({ output: "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(),
    // typescript
    typescript({
      sourceMap: !production,
      inlineSources: !production,
    }),

    // 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,
  },
}

实战项目及模板搭建

svelte-template：https://github.com/JS-banana/svelte-template

Svelte、Typescript、Eslint、Prettier、SSR、Less、Postcss、Tailwind

// 分支
//     --master // TypeScript + Less
//     --ssr // Eslint + Prettier + SSR + Postcss + Tailwind

总结

使用方式及语法和Vue很相似，官网也有比较详细的渐进式教程，上手也算比较简单。对于小型项目、数量较少的活动页面等采用该方式，效率很高。但对于大型项目，且存在较复杂的逻辑交互与数据处理时，优势并不明显，存在一定的局限性。不过作为后来者，该框架的设计思路是较为先进的，同时因为面世不久，还需等待进一步发展，可以报有一定的期待。推荐大家尝试一下，目前生态也渐渐完善了，对于Typescript、Less、Sass、Postcss、eslint的支持也在渐渐完善。如果花点时间跟着官网的demo示例全部走下来，我相信你会很快上手，同时也会有一个比较深刻的理解。

参考

svelte-preprocess：https://github.com/sveltejs/svelte-preprocess

eslint-plugin-svelte3：https://github.com/sveltejs/eslint-plugin-svelte3

sveltejs：https://www.sveltejs.cn/