基于svelte webpack开发umd格式的npm包

标签：npm index js umd webpack svelte 打包

原文链接: https://www.cnblogs.com/yalong/p/18101609

背景：

平常会接触到vue、react、jquery项目，项目中有一些公共组件其实是可以复用的，但是在vue项目中封装好的组件，在react中又不能用；
于是想找个方法，实现一次开发，多框架复用，调研发现svelte正好符合这个要求, 把组件封装成npm发布出去，其他项目使用的时候会更加方便；
为了在jquery项目中也使用封装好的npm组件，所以需要把npm打包成umd的规范

演示项目地址：

webpack全部配置，也都在这项目里
https://github.com/YalongYan/svelte-npm-test

关键步骤

一、创建index.js

index.js 文件就是引入组件，并导出，作为npm包的入口文件；
注意index.js不是项目启动时候的main.js， main.js 是把组件挂载到body上运行， index.js 只是把组件导出

二、webpack打包入口区分

我这里配置了两个打包命令 npm run build 和 npm run build-npm, 主要是传了NPM_ENV 参数，用这个参数来区分，webpack打包的入口文件
webpack 的入口配置如下：

entry: {
		bundle: [
			...stylesheets,
			npm_mode == '1' ? './src/index.js' : './src/main.js'
		]
	},

项目本地启动和正常build 的时候都是使用 main.js，只有打包成npm的时候使用index.js

三、webpack产出代码配置

npm要想打包成umd格式的代码，需要在output里添加， library libraryTarget umdNamedDefine 三个字段,代码如下

output: {
		path: path.resolve(__dirname, 'public/build'),
		publicPath: '/build/',
		filename: '[name].js',
		chunkFilename: '[name].[id].js',
		library: 'YylSvelteNpm', //类库名称
        libraryTarget: 'umd', //类库加载方式
        umdNamedDefine: true
},

四、配置package.json

主要有下面几个配置

  "private": false, 
  "version": "0.0.1",
  "description": "基于svelte开发npm",
  "author": "yyl",
  "main": "public/build/bundle.js",
  "name": "yyl-svelte-npm",

private 必须设置为false, 不然发布到npm别人也看不到这个包
version 版本号，每次发布的时候都需要修改版本，如果版本跟线上一样的话，会导致发布不上去
description 描述，可以加一些自己相加的描述
author 作者名字
main npm 入口文件
name npm上显示的名字

在Vue中使用打包后的npm

npm i yyl-svelte-npm -S // 安装npm包
import YlSvelteTest from 'yl-svelte-test' // 导入包
new YlSvelteTest({
target: document.getElementById('aaaa')
}) // 把组件挂载到一个div上，该div的id为aaaa

vue文件代码如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import YylSvelteTest from 'yyl-svelte-npm'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  mounted() {
      setTimeout(() => {
        new YylSvelteTest({
          target:  document.getElementById('aaaa')
        })
      }, 2000);
  }
}
</script>

注意：<div id="aaaa"></div> 不能放在一个异步组件里，否则会找不到，导致报错我这里直接放在里 index.html 里了
如下就是运行的效果，红色框内就是npm组件：

在Jquery项目中使用

1. 在index.html 中像引用jquery.js 那样引用webpack打包好的js, 如下：

<script src="https://abc.com/test/yyl-svelte-npm.js"></script>

2. 具体使用的代码如下：

    const topRow2 = $('#aaaa')[0] // 这里必须加上[0]
    new window.YylSvelteNpm.default({target: topRow2});

或者换成一行如下所示：

new window.YylSvelteNpm.default({target: document.getElementById('aaaa')});

注意：不要忘了 id 为 aaaa的 div 元素

npm 发布相关命令

npm 官网地址：https://www.npmjs.com/
npm login 登录npm
npm publish 发布到npm仓库
npm who i am 查看当前登录的账号名字

注意点

记得需要单独引用样式文件，打包后的样式文件跟bundle.js在一块的
在package.json中添加 "files": ["./public"], 可以限制只把打包的代码上传到npm，避免源码上传和泄露

总结

使用svelte webpack生成umd 规范的npm 可以在不同框架之间公用，可以提高开发效率
svelte本身相比vue、react会更轻量化，打包后的产物代码量更少而且还没有使用vdom，运行效率也会更高

标签：npm,index,js,umd,webpack,svelte,打包
From： https://www.cnblogs.com/yalong/p/18101609