Rollup packaged Vue component library

Get into the habit of writing together! This is the 3rd day of my participation in the "Nuggets Daily New Plan · April Update Challenge",Click to view event details。

Rollup packaging

The goal of this chapter is toComponents based on the storybook frameworkProject is published.

Before releasing the project, we also need to package the project, here we choose to use Rolluppackage .

Why choose to use Rolluppackaging

• RollupIt is a module packager and webpacksimilar, many open source libraries and frameworks use Rolluppackaging
• RollupSupport Tree-shaking, in open source static analysis code import, exclude code that is not used
  • webpackAlthough it is also supported, we need to configure it manually
• The packaged result webpackis
• It Rollupis more

Reference article:The use of the Rollup packaging tool (super detailed, super basic, super simple with code screenshots)

Install dependencies

Because we need to use it Rollupfor packaging, we need to install all his dependencies

• Rollup

• rollup-plugin-terser: compress the code

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

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

• vue-template-compiler: Creation of a tie rollup-plugin-vue-in job

yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W
复制代码

Rollupconfiguration file

After installing the dependencies, we need to configure Rollupthe configuration files. Here we first show buttonthe packaging of , and then we will demonstrate the packaging of all components.

buttonpackaging

First we create a file in buttonthe rollup.config.jsfolder

file structure

Configuration 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()
    ]
  }
]
复制代码

This configuration file webpackis also very similar, we configured separately:

• entry (input)
• export (output)
• Plugins

Pack

Then we modify the buttonfiles package.jsonin the folder

"scripts": {
    // 添加
    "build": "rollup -c",
  },
复制代码

Running the script At this point, our script is done running, but! The problem is, we have a lot of components with many folders and cannot be packaged one by one like buttons, so how do we do it? ? ?

package all components

Here we need to add a few more dependency files:

• plugin-json: You can let rollup load the json file, which we will use in the configuration file
• rollup-plugin-postcss:(rollup-plugin-postcss doesn't support two solutions for less imports)[juejin.cn/post/692083…]
• plugin-node-resolve: Package the dependent third-party packages in

yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
复制代码

configuration file

Create rollup.config.js in the project root directory

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'

const isDev = process.env.NODE_ENV !== 'production'

// 公共插件配置
const plugins = [
  vue({
    // Dynamically inject css as a <style> tag
    css: true,
    // Explicitly convert template to render function
    compileTemplate: true
  }),
  json(),
  nodeResolve(),
  postcss({
    // 把 css 插入到 style 中
    // inject: true,
    // 把 css 放到和js同一目录
    extract: true
  })
]

// 如果不是开发环境，开启压缩
isDev || plugins.push(terser())

// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
  // 过滤，只保留文件夹
  .filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
  // 为每一个文件夹创建对应的配置
  .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
    }
  })
复制代码

Configure scripts in package.json in the root directory

"build": "rollup -c"
复制代码

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

"main": "dist/cjs/index.js",
"module": "dist/es/index.js"
复制代码

At this point, our configuration is over