第一步:
在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封装的组件库网站以及组件封装实现思路讲解