基于svelte webpack开发umd格式的npm包
原文链接: 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，运行效率也会更高
