rollup + typescript 打造VUE3.0 ui 开发框架

     vue得益于它较低的学习成本，近几年成为了国内较为瞩目的一大前端框架。在搞vue的这几年公司也会提出一些奇奇怪怪的想法，为了满足公司的奇葩需求，我们也是绞尽脑汁的造一些能够通用的轮子。虽然期间打造了一些ui框架，图表的二次封装等等......, 但是一个人还是很难和大厂推出的产品进行对比。毕竟人力物力都不在一个起跑线上。今天主要和大家分享一下rollup如何打造一个前端组件。 网上也有很多讲解rollup的网站不是对api的详细抄袭就是对api文档的解释，基本上没有实战的教程。那么今天我就和大家无坑分享一下我是怎么一步一步的通过rollup 以及rollup的插件进行前端组件开发与发布的。

一、创建项目

在创建项目之前我们要确保node版本不能低于10，运行系统应在mac/windows系统上进行搭建

1.1 首先安装Rollup并创建入口文件

Rollup官网文档地址

• 1、安装rollup到全局 npm install rollup --global

安装完成后运行 rollup -v 验证是否安装成功

• 2、创建项目文件夹，在文件夹内创建 rollup.config.js
• 3、创建入口文件 ./src/index.ts
• 4、创建npm包, 运行 npm init

根据自己的需求进行编辑, 下面是我创建的 package.json文件

1.2 安装Rollup相关插件并进行配置

1. 第一个当然是我们最需要的typescript支持@rollup/plugin-typescript
2. @rollup/plugin-babel 用于将rollup与bable之间的无缝集成
3. rollup-plugin-postcss 对css预处理文件进行解析处理 less,scss
4. @rollup/plugin-commonjs 将CommonJS模块转换为ES6, 方便rollup直接调用
5. @rollup/plugin-node-resolve 对第三方模块的引入
6. cssnano postcss的插件
7. @vue/babel-plugin-jsx vue3.0 jsx 的 babel编译插件。

1.3 编写我们的 rollup.config.js 配置文件

为了使得我们的 rollup.config.js配置文件显得简洁，我们先在跟目录下创建一个 buildconfig 文件夹用于存放我们组件的引入与配置和rollup的输出配置。acorn-jsx是rollup官方推荐的JSX解析器将源代码解析到JSX AST。

import jsx from "acorn-jsx";
import plugins from "./buildconfig/plugins";
import output from "./buildconfig/output";
export default {
  input: "src/index.ts",
  output,
  plugins,
  acornInjectPlugins: [jsx()],
  external: ["vue", "@antv/g2"],
};

1.4 rollup 的 plugins的引入与plugins的配置

因为我们要开发的是vue3.0的组件库，并且要使用ts、tsx开发组件。根据vue官当提供的工具进行安装相关依赖与配置

1. 安装 @vue/babel-plugin-jsx、vue@next

创建.babelrc 进行如下配置, 这样的话我们在运行 rollup的时候会 rollup的bable插件就会运行该插件。

{ "plugins": [["@vue/babel-plugin-jsx"]] }

``` js
import typescript from "@rollup/plugin-typescript";
import babel from "@rollup/plugin-babel";
import postcss from "rollup-plugin-postcss";
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import cssnano from "cssnano";

const extensions = [".ts", ".js", ".tsx"];
export default [
  typescript({
    lib: ["es5", "es6", "dom"],
    target: "es5", // 输出目标
    noEmitOnError: true, // 运行时是否验证ts错误
  }),
  resolve({ mainFields: ["module", "main", "browser"] }),
  commonjs({ extensions, sourceMap: true }),
  babel({ babelHelpers: "bundled", extensions }), // babelHelpers是bable的最佳实践方案 extensions编译的扩展文件
  postcss({
    plugins: [cssnano],
    extract: "dist/css/z-style.css", //css 输出路径
  }),
];

1.5 rollup 的 output配置

globals提取全局包，output 完全依赖于rollup的output规则，[iife、es、umd] 对应三种不同打包的使用场景，iife 在浏览器端使用，es 对应打包处es 模块代码。umd就是一种javascript通用模块定义规范

const globals = {
  vue: 'Vue',
  '@antv/g2': 'G2',
};
const path = 'dist/'; // 编译后代码存放地址
const output = [];

if (process.env.NODE_ENV === 'production') {
  ['iife', 'es', 'umd'].forEach((item) => {
    output.push({
      dir: path + item,
      format: item,
      globals,
      name: 'chartv',
    });
  });
} else {
  output.push({
    dir: path,
    format: 'es',
    globals,
    name: 'chartv',
  });
}

export default output;

二、开发vue3.0组件

以上是我们对与rollup typescript vue3.0 的一个开发环境搭建，下面我们开始开发vue3.0的组件，在开发组件前希望大家先熟悉一下vue3.0的api

文档地址

官方中文文档

官方英文文档

2.1 创建chart组件

在src/package 创建 chart 文件夹，在文件夹下新建index.tsx

import { defineComponent, watch, computed, App } from "vue";

const chartProps = {}

const Chart = defineComponent({

	name: 'chart',
    
	props: chartProps,
    
    methods: {
    	chickChart() {
        	alert('chickChart');
        }
    },
	render() {
    	const { chickChart } = this;
    	return <div onClick={chickChart}>Chart</div>;
    }
});

Chart.install = (app: App) => {
	app.component(Chart.name, Chart);
}

export default Chart;

2.2 修改入口文件，对vue组件进行注册

import chart from '@/package/chart';
import { App, DefineComponent } from 'vue';

const component: Array<DefineComponent | any> = [chart];
const version = '0.0.1';

const install = (app: App) => {
  component.map((item) => {
    app.use(item);
  });
};

export default {
  install,
  version,
};

2.3 编译源代码

package.json 里的 scripts -> "dev": "rollup -c --watch" 是rollup 编译代码的命令, 我们运行 yarn dev, 会在output 指定的文件夹输出编译后的代码。 运行yarn build 会在指定的文件夹生成我们想要的各种组件脚本。

3、详细代码可查看github地址