Make writing a habit together! This is the third day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

A Rollup packaging

The goal of this chapter is to publish component projects based on the StoryBook framework.

We also need to package the project before we can publish it, and we chose to use Rollup packaging.

Why choose to useRolluppackaging

• RollupIs a module packer andwebpackSimilarly, many open source libraries and frameworks are usedRolluppackaging
• RollupsupportTree-shaking, open source static analysis codeimportTo exclude code that is not being used
  • webpackIt is supported, but you need to configure it manually
• Package the results thanwebpacksmaller
• For framework/component library developmentRollupA more appropriate

See article: Rollup packaging tool usage (super detailed, super basic, super simple code screenshots)

Install dependencies

Since we need to use Rollup for packaging, we need to install all of its dependencies

• Rollup

• Rollup-plugin-terser: Compression of code

• [email protected]: Compile single-file components into JS code.

  • Why specify the version? Because his latest component is for Vue3 and my current code is for Vue2..

• Vue-template-compiler: creation of work with rollup-plugin-vue

yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.19. vue-template-compiler -D -W
Copy the code

RollupThe configuration file

After installing the dependencies, we need to configure the Rollup configuration file. Here we show the packaging of button first and then the packaging of all components

buttonThe packaging

First we create the rollup.config.js file in the button folder

File structure

Configure the content

import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'


import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'

module.exports = [
  {
    input: 'index.js'.output: [{file: 'dist/index.js'.format: 'es'}].plugins: [
      vue({
        // Dynamically inject css as a <style> tag
        css: true.// Explicitly convert template to render function
        compileTemplate: true
      }),
      terser()
    ]
  }
]
Copy the code

This configuration file is also very similar to WebPack. We configure it separately:

• Input
• Output
• Plugins

packaging

We then modify the package.json file in the Button folder

"scripts": {
    / / add
    "build": "rollup -c",},Copy the code

Run the scriptAt this point, our script is done, but! The problem is, we have a lot of folders a lot of components,Instead of packing one by one like Button, how can we do that??

Package all the components

Here we need to add a few dependency files:

• plugin-jsonRollup can be used to load json files
• rollup-plugin-postcss(Rollup-plugin-postCSS does not support less Imports’ two solutions)[Juejin. Cn/post / 692083…]
• plugin-node-resolve: Package dependent third-party packages

yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
Copy the code

The configuration file

The project root directory creates rollup.config.js

import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'

constisDev = process.env.NODE_ENV ! = ='production'

// Public plug-in configuration
const plugins = [
  vue({
    // Dynamically inject css as a <style> tag
    css: true.// Explicitly convert template to render function
    compileTemplate: true
  }),
  json(),
  nodeResolve(),
  postcss({
    // Insert CSS into style
    // inject: true,
    // Put CSS in the same directory as JS
    extract: true})]// If it is not a development environment, enable compression
isDev || plugins.push(terser())

// Packages folder path
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
  // Filter only folders
  .filter(item= > fs.statSync(path.resolve(root, item)).isDirectory())
  // Create a configuration for each folder
  .map(item= > {
    const pkg = require(path.resolve(root, item, 'package.json'))
    return {
      input: path.resolve(root, item, 'index.js'),
      output: [{exports: 'auto'.file: path.resolve(root, item, pkg.main),
          format: 'cjs'
        },
        {
          exports: 'auto'.file: path.join(root, item, pkg.module),
          format: 'es'},].plugins: plugins
    }
  })
Copy the code

Configure scripts in package.json in the root directory

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

Set the main and Module fields in package.json in each package

"main": "dist/cjs/index.js"."module": "dist/es/index.js"
Copy the code

At this point, we are done with our configuration