Svelte+Rollup写SDK太香

·  阅读 1008

sQfxwF.jpg

一、需求背景:

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

二、为什么选择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…

分类:
前端
标签: