Thanks to its low learning cost, VUE has become one of the most popular front-end frameworks in China in recent years. During the years of vUE, the company would come up with some strange ideas. In order to meet the company’s strange needs, we also racked our brains to make some wheels that could be used universally. Although some UI frameworks, secondary packaging of charts and so on were built during the period…… But it is still difficult for one to compare with the products of the big factories. After all, manpower and material resources are not on the same starting line. Today I want to share with you how Rollup builds a front-end component.

There are many web sites that explain rollup that are either detailed cribs of the API or explanations of the API documentation, with few practical tutorials. So today I will share with you how I used rollup and rollup plug-ins to develop and publish front-end components step by step.

Create a project

Before creating the project, make sure node is no less than 10 and that the operating system is built on a MAC/Windows operating system

1.1 First install Rollup and create the entry file

Rollup official document address

  • Install rollup globallynpm install rollup --global

After the installation is complete, run rollup -v to verify the installation

  • 2. Create a project folder and create it within the folderrollup.config.js
  • 3. Create an entry file./src/index.ts
  • 4. Create the NPM package and run itnpm init

Following is the package.json file I created to edit it to suit my own needs

1.2 Installing and configuring Rollup plug-ins

  1. The first, of course, is the typescript support we need most@rollup/plugin-typescript
  2. @rollup/plugin-babelFor seamless integration between rollup and bable
  3. rollup-plugin-postcssParse the preprocessed CSS filesless.scss
  4. @rollup/plugin-commonjsConvert CommonJS modules to ES6 for easy rollup calls
  5. @rollup/plugin-node-resolveThe introduction of third-party modules
  6. cssnanoPostcss plugin
  7. @vue/babel-plugin-jsxVue3.0 JSX Babel compiler plug-in.

1.3 Write ourrollup.config.jsThe configuration file

To keep our rollup.config.js configuration file concise, we’ll create a buildConfig folder in the following directory to store our component import and configuration and rollup output configuration. Acorn-jsx is rollup’s official recommended JSX parser for parsing source code into the 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"]};Copy the code

1.4 Introduction and configuration of rollup plugins

Because what we want to develop is vue3.0 component library, and want to use TS, TSX development component. Install dependencies and configure them according to the tools provided by the VUE administrator

  1. The installation@vue/babel-plugin-jsx,vue@next

Create.babelrc and configure it so that when we run rollup the Bable plug-in that will rollup will run that plug-in.

Copy the code

{ “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: }), resolve({mainFields: ["module", "main", "browser"]}), commonJS ({extensions, sourceMap: true }), babel({ babelHelpers: Extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions extensions Dist/CSS /z-style. CSS ", // CSS output path}),];Copy the code

1.5 Rollup output configuration

[Iife, ES, umD] correspond to three different packaging usage scenarios. Iife is used in the browser. Es corresponds to the ES module code at the packaging location. Umd is a common javascript module definition specification

const globals = {
  vue: 'Vue'.'@antv/g2': 'G2'};const path = 'dist/'; // Where the compiled code is stored
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;
Copy the code

Second, develop vue3.0 components

This is a rollup typescript Vue3.0 development environment for vue3.0 components. We want to familiarize ourselves with the VUe3.0 API before developing components

The document address

Official Chinese document

Official English Document

2.1 createchartcomponent

Create chart folder in SRC/Package and create index.tsx under chart folder

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;
Copy the code

2.2 Modify the import file to register vUE components

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,
};

Copy the code

2.3 Compiling Source Code

Json scripts -> “dev”: “rollup -c –watch” is the rollup command to compile the code. If we run yarn dev, the compiled code will be output in the output folder.

Running YARN Build will generate the various component scripts we want in the specified folder.

3, the detailed code can be viewedMaking the address