Vue3初探之基于rollup打包发版至npm
第一步：
在libs文件下创建index.ts文件,导出所有的组件为组件名，文件中的代码如下显示
export { default as BreadCrumbsitem } from "./BreadCrumbsItem.vue";
export { default as BreadItem } from "./BreadItem.vue";
export { default as Button } from "./Button.vue";
export { default as Carousel } from "./Carousel.vue";
export { default as CheckBox } from "./CheckBox.vue";
export { default as City } from "./City.vue";
export { default as Dialog } from "./Dialog.vue";
export { default as InputNumbers } from "./InputNumbers.vue";
export { default as Pagination } from "./Pagination.vue";
export { default as Switch } from "./Switch.vue";
export { default as Tab } from "./Tab.vue";
export { default as Tabs } from "./Tabs.vue";
第二步：
在根目录下创建rollup.config.js
import esbuild from 'rollup-plugin-esbuild' // plugin-esbuild将ts变为js
import vue from 'rollup-plugin-vue' // plugin-vue将vue结尾的文件变为js
import scss from 'rollup-plugin-scss' // plugin-scss将scss结尾的变为js
import dartSass from 'sass'; // 用于支持插件
import { terser } from "rollup-plugin-terser" // 变丑别人看不懂（压缩后的）
export default {
input: 'src/lib/index.ts', // 输入文件
// 输出，告诉rollup一些重要的信息
output: {
globals: {
vue: 'Vue' // 我们的仓库实际依赖vue, vue是不需要打包的，所以这里说明我们用了一个全局变量vue
},
name: 'one-piece', // 仓库或组件的名字
file: 'dist/libs/one-piece.js', // 我们要生成的文件目录（css是自动创建）
format: 'umd', // 文件输出格式为UMD，一个统一的模块定义器
plugins: [terser()] // 插件，（js的丑化，即打包后，不容易阅读的压缩后的文件）； 如果去掉terser()，得到的js代码即为容易阅读的
},
plugins: [
scss({ include: /\.scss$/, sass: dartSass }), // 对所有样式文件进行编译
vue({ // 引用的vue插件，即上述引入的插件使用一遍，以及添加一些选项
include: /\.vue$/,
})
esbuild({ // 对所有的js及ts进行编译，编译为ie支持的js(目标为es6)
include: /\.[jt]s$/,
minify: process.env.NODE_ENV === 'production',
target: 'es2015'
}),
],
}
第三步：
执行rollup -c, 出现以下报错,
one.png
根据提示一步一步执行安装；（这里直接给出需要执行的n add --dev rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-命令）安装提示需要的插件（全部插件如下：
yarplugin-terser
注意：此插件安装的时间长,需要在package.json添加以下代码:
···"resolutions": {
"node-sass": "npm:sass@1.26.11"
}
yarn add --dev rollup-plugin-esbuild@2.5.0
第四步：发版
第1步： 添加files和main; 在package.json中进行添加（两者是唯一的）
"files": [ // 要上传的所有文件
"dist/lib/*"
],
"main": "dist/lib/Lovely.js", // 主文件
"license": "MIT",
"author": "rulyc",
"description": "基于vue3+TypeScript研发的UI框架（目前是实验阶段）",
执行命令npm config get registry 是确定目前的淘宝源。
1.png
如果是这样，就不需要切换淘宝源文；如果不是，请切换为这样。
紧接着，运行npm publish
2.png
需要用作者的身份进行发版； 进入npm 官网进行注册，npm官网
输入命令： npm login 回车
3.png
4.png
出现为下面这样，就是 成功了
5.png
最后去npm上查看packages即可。
Install
npm install sunline-ui
yarn add sunline-ui
Usage
import {Button,Tabs,Dualog,Tabs,Carouse,City,Pagination,InputNumber,CheckBox,BreadItem} from "sunline-ui"
<template>
<div>
<Button>按钮</Button>
</div>
</template>
<script>
import {Button, Tabs,Tabs,Carouse，City,Pagination,InputNumber,CheckBox,BreadItem} from "sunline-ui"
export default {
components: {Button,Tabs,Tabs,Carouse，City,Pagination,InputNumber,CheckBox,BreadItem}
}
</script>```
