rollup

  1. Vue React is packaged through rollup to meet component library development packaging requirements
  2. Packaging speed, fast hand, simple function, expansibility is also very strong

Basic configuration and usage of rollup

First create a new component library directory and initialize it

npm init -y
Copy the code

Make changes to package.json

{
    "name": "datav-libs-dev"."version": "1.0.0".// The description of the component library
    "description": "data components library"."main": "index.js"."scripts": {
        "dev": "rollup -c rollup.dev.config.js".// Pack the command
        "build": "rollup -wc rollup.dev.config.js" // Package command with listen
    },
    "keywords": []."author": "zsq<[email protected]>"."license": "ISC",}Copy the code

Install Rollup to configure the packaging options

npm i rollup -D
Copy the code

Create configuration file rollup.dev.config.js in the root directory

const path = require('path')
const inputPath = path.resolve(__dirname, './src/index.js');
const outputPath = path.resolve(__dirname, './dist/datav.umd.js');
module.exports = {
  input: inputPath,
  output: {
      file: outputPath,
      format: 'umd'.name: 'datavTest'}},Copy the code

Packaging into different modularized differences

The format in the configuration item represents different modular packaging options for the output: UMD CJS ES

  1. Umd: Is the most commonly used modular standard. Umd packaging output is A JS function, the browser can directly recognize
  2. CJS: indicates that the commomJS standard is generated after packaging. Output in the form of module.export. Browsers do not recognize modules, and all CommonJS modules need to be packaged
  3. Es: the output is packaged with the module of ES and exported using export Default. Browsers do not support this by default, but modern browsers can support it by adding type=”module” to the script when it is introduced

Create index.js to configure output packaging for multiple modules

Create SRC /index.js in the root directory

console.log('hello rollup! ');
export{}Copy the code

Install the plugin rollup-plugin-node-resolve

npm run rollup-plugin-node-resolve
Copy the code

Then change the rollup.dev.config.js configuration to

const path = require('path')
const resolve = require('rollup-plugin-node-resolve');
const inputPath = path.resolve(__dirname, './src/index.js');
const outputPath = path.resolve(__dirname, './dist/datav.umd.js');
const outputPathcjs = path.resolve(__dirname, './dist/datav.cjs.js');
const outputPathes = path.resolve(__dirname, './dist/datav.es.js');
// Node uses CommomJS by default
module.exports = {
  input: inputPath,
  // OuPUT can be configured to output more than one at a time or only one at a time
  output: [{file: outputPath,
      format: 'umd'.name: 'datavTest'
    },
    {
      file: outputPathcjs,
      format: 'cjs'.name: 'datavTest'
    },
    {
      file: outputPathes,
      format: 'es'.name: 'datavTest'},],}Copy the code

Run the command to package the generated file as follows

npm run dev
Copy the code

Resolve references to external component library packaging

When we write component libraries by ourselves, it is inevitable to use the external NPM package library. If we do not deal with it, the packaged components cannot be used independently, so we need to package the external referenced libraries into our own component libraries on demand at the same time to make a general component library. Use the rollup-plugin-node-resolve plug-in to solve this problem.

A plug-in Validator is installed and then imported via ES6

npm install validator
Copy the code

Index. Js file

import isEmail from 'validator/es/lib/isEmail'
var test = isEmail('[email protected]');
console.log('this is emaill? ', test)
export default isEmail
Copy the code

Instead of using rollup-plugin-nod-resolve in the current package configuration file, the current package will tell us that the imported dependency cannot be found and that the global name is not available.

npm run dev 
Copy the code

To resolve how external dependencies are packaged into the component libraries we write, we use the Resolve plug-in. Example Modify the configuration file rollup.dev.config.js

const path = require('path')
const inputPath = path.resolve(__dirname, './src/index.js');
const outputPath = path.resolve(__dirname, './dist/datav.umd.js');
const outputPathcjs = path.resolve(__dirname, './dist/datav.cjs.js');
const outputPathes = path.resolve(__dirname, './dist/datav.es.js');
// Node uses CommomJS by default
module.exports = {
  input: inputPath,
  // OuPUT can be configured to output more than one at a time or only one at a time
  output: [{file: outputPath,
      format: 'umd'.name: 'datavTest'
    },
    {
      file: outputPathcjs,
      format: 'cjs'.name: 'datavTest'
    },
    {
      file: outputPathes,
      format: 'es'.name: 'datavTest'},].plugins: [
    resolve()
  ]
}
Copy the code

Once packaged, the externally referenced library can be used directly in isolation.