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