preface

I spent most of my time on components, but I gave up after doing them. For example, I wrote a WebComponent library [MUI] in Stencil during the epidemic last year. The components were almost perfect, but finally the company could not accept this form. And then it’s forgotten. The later Uni-App component library [MiuI-UNI] did not avoid this outcome. In the following more than a year, I was basically immersed in writing various forms of component library. From the fool-writing method at the beginning (without any packaging tools), I felt unable to write every time I was writing. Until I learned about rollup by chance this year, I found the best posture to write component library again.

Without further ado,

The infrastructure

First, open Powersheel in Windows 11 and follow the steps below.

mkdir xxx
npm init -y
cnpm i -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-json
Copy the code

Not surprisingly, your package.json should look like this.

"devDependencies": {
    "@rollup/plugin-commonjs": "^ 19.0.0"."@rollup/plugin-json": "^ 4.1.0." "."@rollup/plugin-node-resolve": "^ 13.0.0"."rollup": "^ 2.52.3"
}
Copy the code

The shell company had been created, and then a crude corporate system had to be established.

Company Policy Template (rollup.config.js)

import json from '@rollup/plugin-json'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

export default {
  input: 'src/index.js'.output: [{
    file: 'dist/bundle.js'.format: 'cjs'.exports: 'auto'}].plugins: [
    json(),
    resolve(),
    commonjs()
  ]
}
Copy the code

Next, create a REN component to see if the system works.

src/index.js

export default function () {
  const name = 'ren';
  console.log(name)
}
Copy the code

Next add a spell script to the HUMAN resources headquarters package.json

"dev": "rollup -c"
Copy the code

If rollup is installed globally, you don’t need to notify human resources.

yarn dev && rollup -c
Copy the code

Here is the output of this instruction

'use strict';

function index () {
  const name = 'ren';
  console.log(name);
}

module.exports = index;

Copy the code

Of course, if that’s all it is, why is Rollup so powerful? As for the more detailed configuration list, please baidu yourself.

Postcss

A good component library is certainly not only javascript bar, web page three swordsmen (HTML, CSS, javascript) that is indispensable.

At present the most popular CSS preprocessing is nothing more than that three: Sass, less, postCSS, less I have never used, not in this class, SCSS also wrote for a long time, can feel bad so a little taste, needless to know it, next to introduce postCSS configuration, nothing to say, do it.

Rollup-plugin-postcss, the address has been posted, please enjoy it carefully.

cnpm i -D rollup-plugin-postcss postcss
Copy the code
import postcss from 'rollup-plugin-postcss'
plugins: [
    json(),
    resolve(),
    commonjs(),
    / / add
    postcss({
      extract: true  //true: separate the CSS file. False: insert the CSS in the style})]Copy the code

SRC /index.js is modified a little bit. Create main.css in this directory and enter it in index.js.

import './main.css'
Copy the code

Whisper the spell again!

Not surprisingly, you’ll find these two below.

Postcss is ok, but there are no plug-ins, this is like hand-written CSS what is the difference, the next installation of plug-ins some many, to this step can be installed according to the needs of their own plug-ins.

cnpm i -D postcss-color-mod-function postcss-functions postcss-import postcss-mixins postcss-modules postcss-nested postcss-prepend-imports postcss-pxtorem postcss-simple-vars
Copy the code

Create a postCSS configuration file postcss.config.js.

module.exports = {
  plugins: [
    // Preload the CSS shown here, often used to configure theme variables
    // require('postcss-prepend-imports')({
    // path: `./src/themes/default`,
    // files: ['variable.css']
    // }),
    require('postcss-import') (the),require('postcss-nested') (the),require('postcss-pxtorem') ({rootValue: 20.propList: [The '*'.'! border'].replace: true.mediaQuery: false.minPixelValue: 0.exclude: /node_modules/i
    }),
    require('postcss-color-mod-function') (the),require('autoprefixer') ({overrideBrowserslist: [
        "last 2 version"."1%" >."ios 7"]}),require('postcss-functions') ({// Here you can write js methods for postCSS to call
      functions: {}}),require('postcss-simple-vars') (the),require('cssnano')]}Copy the code

Modify the rollup. Config. Js.

const postcssConfig = require('./postcss.config')

postcss({
  extract: true./ / new
  plugins: postcssConfig.plugins
})
Copy the code

At this point, you can write SCSS without any scruples, no, postCSS.

Babel

Then, in order to adapt to the fact that some (Microsoft) browsers are still ancient and don’t understand our everyday language, we need a translator.

cnpm i -D rollup-plugin-babel @babel/core @babel/plugin-proposal-object-rest-spread babel-plugin-transform-object-assign  @babel/runtime-corejs2 @babel/plugin-transform-runtime @babel/preset-env babel-loaderCopy the code

Modify the SRC/index. Js

import './main.css'
export default class {
  constructor () {
    console.log('helloworld')}}Copy the code

When repackaged, it automatically translates into a language that IE can recognize.

Typescript

Supporting typescript on top of Babel is easy.

cnpm i -D @babel/preset-typescript typescript tslib
Copy the code

Modify the rollup. Config. Js

babel({
  exclude: [/\/core-js\//].runtimeHelpers: true.extensions: ['.js'.'.jsx'.'.es6'.'.es'.'.mjs'.'.vue'.'.ts'].presets: [["@babel/env", {
      modules: false.useBuiltIns: 'usage'.corejs: 2.forceAllTransforms: true}]./ / add
    [
      "@babel/preset-typescript",
      {
        extensions: [".ts"]}]],plugins: [
    "babel-plugin-transform-object-assign"."@babel/plugin-proposal-object-rest-spread"]})Copy the code

You can also use rollup-plugin-typescript2 alone, which works just like a normal rollup plugin.

Pug

Remember when concatenated strings or Document.createElement were horrible to write, rollup also supports puG templates.

cnpm i -D rollup-plugin-pug
Copy the code

Then import it as usual in rollup.config.js.

For details, see rollup-plugin-pug

Tips: PuG can work with postCSs-modules, there will be different fireworks, here is not detailed, please check the details of github later use.

Finally, gitee is posted here for more detailed configuration for your reference.

This article will cover rollup’s basic packaging and the UI component library infrastructure built by some common plugins. We will update the rollup package tutorial for other component libraries (vue2, vue3) as well as the Storybook series.