I. Demand Background:

My company sells part of its business line to Baidu. There is a subject Change Agreement notification for all businesses involved, which is essentially a popover that only needs to be displayed under specified circumstances. In general, this needs to be independent and strong, and no coupling with the old business logic, just a popover. It looks so easy, it could be done in less than an hour.

Why Svelte and rollup

  • It’s not that simple: but many lines of business have this requirement, and hosted pages are written in different architectures, such as JSP, React, SSR, and even static pages. And I can’t (don’t want to) modify the old logic, so this feature should be done regardless of the hosting page, and it needs to be non-intrusive of the original code.
  • The best way to do that is: All services pass<script>Introduce a script that contains all the logic. It happened to be amway from the departmentSvelteI’ve always wanted to use it if I combine it againRollupPacked. It smells good to think about.
  • Svelte: Very little code, very fast to learn, very fast to run on small projects.
  • Rollup: Builds smaller, purer packages that fit better with the SDK than WebPack.

How to write code

1. Build a demo:

Build a basic runnable code, after practice, the following dependencies are necessary.

$ yarn add rollup
$ yarn add svelte
$ yarn add rollup-plugin-svelte -D
$ yarn add rollup-plugin-node-resolve -D
Copy the code

The basic directory structure is as follows:

├ ─ ─ the SRC │ ├ ─ ─ the main, js │ └ ─ ─ the main, svelte │ ├ ─ ─ package. The json ├ ─ ─ a rollup. Config. Js └ ─ ─ yarn. The lockCopy the code

Rollup.config. js can be configured to support 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(),
    ]
}
Copy the code

Rollup -c can package a UMD mode index.js in dist directory after setting up the basic environment. Just throw this JS into an HTML validation.

2. Perfect:

As you can imagine, this is incomplete, plus the following features:

  • Code format verification: esLint,TSLint
  • Conversion ES6,IE support: Babel
  • Ts support
  • Unit test: Jest
  • SCSS, node – sass
  • Create an HTML file to serve Rollup

Then, after several iterations (research), a more complete SDK configuration can be formed, and then this set of template projects can be used. Ps: Rollup configuration code is shared at the end, if you are interested.

3. Conclusion:

What seems to be a simple feature, svelte+rollup is packaged with a smaller and more efficient SDK, which also accumulates a template project.

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'

constproduction = ! process.env.ROLLUP_WATCHconst 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,},],],}),// Environment variables
    replace({
      'process.env.production': production,
    }),
    production && terser(),
  ],
}
Copy the code

If you see here, why don’t you join us: internal push: Happy Times, welcome harassment: github.com/wuweikd/per…