- 创建lib/index.ts,将所有需要导出的文件导出
export { default as Switch } from './Switch.vue';
export { default as Button } from './Button.vue';
export { default as Tabs } from './Tabs.vue';
export { default as Tab } from './Tab.vue';
export { default as Dialog } from './Dialog.vue';
export { openDialog as openDialog } from './openDialog';
export { default as Switch } from './Switch.vue';的意思就是import Switch from './Switch.vue' export {Switch}
2.因为使用的是vite,所以需要使用rollup打包代码
首先先配置rollup.config.js
import esbuild from 'rollup-plugin-esbuild'
import vue from 'rollup-plugin-vue'
import scss from 'rollup-plugin-scss'
import dartSass from 'sass';
import { terser } from "rollup-plugin-terser"
export default {
input: 'src/lib/index.ts',
output: {
globals: {
vue: 'Vue'
},
name: 'evue',
file: 'dist/lib/evue.js',
format: 'umd',
plugins: [terser()]
},
plugins: [
scss({ include: /\.scss$/, sass: dartSass }),
esbuild({
include: /\.[jt]s$/,
minify: process.env.NODE_ENV === 'production',
target: 'es2015'
}),
vue({
include: /\.vue$/,
})
],
}
3.全局安装rollup
yarn global add rollup
- 安装其他依赖
yarn add --dev rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-plugin-terser
为防止安装速度过慢,请在package.json中,添加下面的一段代码
"resolutions": {
"node-sass": "npm:sass@1.26.11"
}
- 运行
rollup -c6.在package.json中添加files和main,files里面是你要打包输出的文件,main里面是你需要输出的主文件
"files": [
"dist/lib/*"
],
"main": "dist/lib/evue.js",
7.查看自己的npm使用的是什么源,必须是官方源才可以上传
npm config get registry
npm config set registry https://registry.npmjs.org/
8. 在终端输入
npm login,登陆你的账号,然后输入npm publish