Svelte+Rollup写SDK太香

2021年01月09日 23:36 · 阅读 1008

一、需求背景：

本人所在公司，出售部分业务线到百度。涉及到的业务都会有个《主体变更协议》通知，其实这就是个弹窗，只需在指定的情况下显示出来即可。总体来说这需求独立性又强，和旧业务逻辑无耦合，弹个弹窗就行。看起来太简单了，可能一个小时不到就搞定了。

二、为什么选择Svelte 和 rollup

没这么简单：但是很多业务线都有这个需求，且承载的页面用不同的架构编写，比如JSP，react，SSR，甚至有的是静态页面。并且我无法（不想）去修改旧逻辑，那么这个功能就要做到无视承载页面，然后需要无侵入原代码。
最好的方法就是：各个业务通过<script>引入一个脚本嘛，此脚本既包含所有逻辑即可。正好被部门同事安利Svelte，一直想用一下，如果再结合Rollup打包，想想就很香。
Svelte：代码量非常小，上手很快，在小型项目里运行极快。
rollup：构建出的包更小，更纯净的原因，比webpack更适合SDK。

三、如何编写代码

1. 构建个demo：

搭建一个最最基本的可以跑的代码起来，经过实践，以下的依赖是必须的。

$ yarn add rollup
$ yarn add svelte
$ yarn add rollup-plugin-svelte -D
$ yarn add rollup-plugin-node-resolve -D
复制代码

最基本的目录结构如下：

├──src  
│  ├──main.js  
│  └──main.svelte  
│  
├──package.json  
├──rollup.config.js  
└──yarn.lock  
复制代码

其中重要rollup.config.js，配置如下就能支持svelte了：

// rollup.config.js  
import svelte from 'rollup-plugin-svelte'
import resolve from 'rollup-plugin-node-resolve'

export default {
    input: './src/main.js',
    output: [{
        file: 'dist/index.js',
        format: 'umd',
        name: 'test'
    }],
    plugins: [
        svelte({}),
        resolve(),
    ]
}
复制代码

最基本的环境搭建完成，rollup -c，即可在dist目录下打包出一个umd模式的index.js。随便把这个js放到一个html验证即可。

2. 完善：

可想而知，这个是不完整的，加上以下功能：

代码格式校验：esLint,TSLint
转换ES6,IE支持: babel
ts支持
单元测试：Jest
scss，node-sass
创建HTML文件以服务Rollup

然后再经过多次迭代(查资料),就可形成比较完善的SDK配置，之后用这一套模板工程即可。 ps: rollup配置代码分享在最后，感兴趣可以看看。

3.总结：

看似一个很简单的功能,，利用svelte+rollup 打包出一个更小更高效的SDK，借此也积累了一个模板工程。

4. rollup.config.js

import typescript from 'rollup-plugin-typescript2'
import resolve from 'rollup-plugin-node-resolve'
import styles from 'rollup-plugin-styles'
import commonjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import json from '@rollup/plugin-json'
import {terser} from 'rollup-plugin-terser'
import svelte from 'rollup-plugin-svelte'
import autoPreprocess from 'svelte-preprocess'
import replace from 'rollup-plugin-replace'
import alias from '@rollup/plugin-alias'
import html from '@rollup/plugin-html'

const production = !process.env.ROLLUP_WATCH

const aliases = alias({
  resolve: ['.svelte', '.js', '.ts'],
  entries: [{find: 'src', replacement: __dirname + '/src'}],
})

export default {
  input: './src/index.ts',
  output: [
    {
      file: 'dist/index.js',
      format: 'umd',
      name: 'notice-sdk',
    },
  ],
  plugins: [
    html(),
    typescript(),
    aliases,
    svelte({
      preprocess: autoPreprocess(),
    }),
    resolve(),
    commonjs(),
    json(),
    styles(),
    // compile to good old IE11 compatible ES5
    babel({
      babelHelpers: 'runtime',
      extensions: ['.js', '.mjs', '.html', '.svelte', '.ts'],
      exclude: [
        'node_modules/@babel/**',
        'node_modules/core-js/**',
        /\/core-js\//, // prevent circular depedencies https://github.com/rollup/rollup-plugin-babel/issues/254
        'node_modules/!(' + 'preact|preact-compat' + ')/**',
      ],
      presets: [
        [
          '@babel/preset-env',
          {
            modules: false,
            targets: {
              ie: '11',
            },
            useBuiltIns: 'entry',
            corejs: 3,
          },
        ],
      ],
      babelrc: false,
      plugins: [
        '@babel/plugin-syntax-dynamic-import',
        [
          '@babel/plugin-transform-runtime',
          {
            useESModules: true,
          },
        ],
      ],
    }),
    //环境变量
    replace({
      'process.env.production': production,
    }),
    production && terser(),
  ],
}
复制代码

如果你看到了这里，不如加入我们：
内推：欢聚时代，欢迎骚扰：
github.com/wuweikd/per…