使用svelte+webpack 打包成umd形式的js库

使用svelte写js库

js库

在项目中遇到需要整理的通用js的方法，比如统一获取用户信息或者获取当前的URL等等，这些使用js class都可以一把梭，直接干就完了。 但最近需求要提供统一的toast， 弹框UI等等，就裂开了

需求 : 让第三方开发者使用提供的js库， 释放统一的弹框，对话框， toast， 通知组件等。

讲道理，这些通用组件只要是前端开发的肯定会用到一些通用的框架，比如 vue 的Vant UI 等等。不过如果不是vant UI 的或者react 等其他技术栈的 开发， 需要开发出统一的效果，还是有点麻烦，至少谁都不愿意去改动原有框架的实现的UI。 所以需要一个统一的js库， 能提供一些不涉及框架的UI库。 思来想去，在网上搜索了一把。 发现 svelte 的这个框架很vue， 很vue说明上手是非常快的， 果断官网撸了一把。

svelte

简单来说svlte就是和jq一样，提供了一套操作dom的框。 反正很vue 。 光说不练假把式。

使用svelte + webpack 打成umd 的形式

简单的撸了一个demo，各位可以直接clone, 直接写业务了。 https://github.com/LanjianNUll/svelte-webpack-umd-demo

下面贴webpack.config.js

const Path = require('path');
const sveltePreprocess = require('svelte-preprocess');

module.exports = (env, argv) => {
    const isDev = argv.mode === 'development';
    return {
      mode: argv.mode,
      devtool: false,
      entry: {
        //   根据实际项目命名
        svelteUmd: Path.resolve(__dirname, './index.js'),
      },
      target: ['web', 'es5'],
      output: {
        path: Path.resolve(__dirname, './dist'),
        filename: '[name].min.js',
        library: {
          name: 'svelteUmd',
          type: 'umd',
          umdNamedDefine: true,
          export: "default",
        },
      },
      resolve: {
        extensions: ['.ts', '.js', '.html', '.less', '.mjs', '.svelte'],
        alias: {
          svelte: Path.resolve('node_modules', 'svelte'),
        },
        mainFields: ['svelte', 'browser', 'module', 'main'],
      },
      module: {
        rules: [
          {
            test: /\.(js|ts)$/,
            use: [
              { loader: 'babel-loader' }
            ],
          },
          {
            test: /\.(less|css)$/i,
            use: [
              {
                loader: 'style-loader',
              },
              { loader: 'css-loader' },
              {
                loader: 'less-loader',
                options: {
                  lessOptions: { math: 'always' },
                },
              },
            ],
          },
          {
            test: /\.(svelte)$/,
            use: [
              'babel-loader',
              {
                loader: 'svelte-loader',
                options: {
                    preprocess: sveltePreprocess({
                      sourceMap: isDev,
                    }),
                    compilerOptions: {
                      dev: isDev,
                      accessors: true,
                    },
                    emitCss: true,
                    hotReload: false,
                  }
              },
            ],
          },
          {
            // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
            test: /node_modules\/svelte\/.*\.m?js$/,
            resolve: {
              fullySpecified: false,
            },
            use: ['babel-loader'],
          },
        ],
      },
      watchOptions: {
        ignored: ['**/node_modules'],
      },
    };
  };
  

然后就是如何使用svelte

import {default as indexSvelte} from './index.svelte'
export class svelteUmd {
    compInstance = null
    constructor() {
        this._initComponent()
    }
    _initComponent() {
      // 引入svelte 初始化组件，target 为挂载到哪个dom
        this.compInstance = new indexSvelte({
            target: document.body,
            props: {
                say: 'helloWorld',
            }
        });

         // bind events
      this.compInstance.$on('reply', (e) => {
        this.compInstance.reply= '你好，svelte';
      });
    }
}

总结

个人认为svelte两大优势：

1. 可用svelte开发简单的页面，如官网，H5宣传。 有利于seo， 因为它没有虚拟dom,
2. 可以用于开发统一的组件，特别是针对第三方提供的一些涉及UI的组件