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>```