Vue3初探之基于rollup打包发版至npm

第一步：
在lib文件下创建index.ts文件；导出所有的组件为组件名

export { default as Switch } from './Switch.vue'
export { default as Button } from './Button.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: 'Lovely', // 仓库或组件的名字
    file: 'dist/lib/Lovely.js', // 我们要生成的文件目录（css是自动创建）
    format: 'umd', // 文件输出格式为UMD，一个统一的模块定义器
    plugins: [terser()] // 插件，（js的丑化，即打包后，不容易阅读的压缩后的文件）； 如果去掉terser()，得到的js代码即为容易阅读的
  },
  plugins: [
    scss({ include: /\.scss$/, sass: dartSass }), // 对所有样式文件进行编译
    esbuild({ // 对所有的js及ts进行编译，编译为ie支持的js(目标为es6)
      include: /\.[jt]s$/,
      minify: process.env.NODE_ENV === 'production',
      target: 'es2015'
    }),
    vue({ // 引用的vue插件，即上述引入的插件使用一遍，以及添加一些选项
      include: /\.vue$/,
    })
  ],
}

第三步：

执行 rollup -c

根据提示一步一步执行安装；（这里直接给出需要执行的命令）
安装提示需要的插件（全部插件如下：）

yarn add --dev rollup-plugin-esbuild rollup-plugin-vue rollup-plugin-scss sass rollup-plugin-terse

执行yarn install ,如果报错如下：

就执行：

yarn config set ignore-engines true

yarn install

再次执行 rollup -c

请将package.json文件中的升级符号去掉，重新执行yarn install，再执行rollup -c


此时打包成功了。

第四步：发版
第一步： 添加files和main; 在package.json中进行添加（两者是唯一的）

"files": [  // 要上传的所有文件
  "dist/lib/*"
],
"main": "dist/lib/Lovely.js", // 主文件
 "license": "MIT",
 "author": "rulyc",
 "description": "基于vue3+TypeScript研发的UI框架（目前是实验阶段）",

执行命令npm config get registry 是确定目前的淘宝源。

如果是这样，就不需要切换淘宝源文；如果不是，请切换为这样。

紧接着，运行npm publish

需要用作者的身份进行发版； 进入npm 官网进行注册，npm官网
输入命令： npm login 回车


出现为下面这样，就是 成功了

最后去npm上查看packages即可。

上述两个插件皆为试验，目前暂未开放使用。更多精彩内容，可以关注博主，博主后期会不定时更新基于Vue3+TypeScript封装的组件库网站以及组件封装实现思路讲解