基於svelte webpack開發umd格式的npm包

进军的蜗牛發表於2024-03-29
WebNPM

原文連結: 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 釋出相關命令

  1. npm 官網地址：https://www.npmjs.com/
  2. npm login 登入npm
  3. npm publish 釋出到npm倉庫
  4. npm who i am 檢視當前登入的賬號名字

注意點

  1. 記得需要單獨引用樣式檔案，打包後的樣式檔案跟bundle.js在一塊的
  2. 在package.json中新增 "files": ["./public"], 可以限制只把打包的程式碼上傳到npm，避免原始碼上傳和洩露

總結

  1. 使用svelte webpack生成umd 規範的npm 可以在不同框架之間公用，可以提高開發效率
  2. svelte本身相比vue、react會更輕量化，打包後的產物程式碼量更少而且還沒有使用vdom，執行效率也會更高

相關文章