“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

  • Rollup is similar to WebPack, but much smaller. With the use of webpack and some plug-ins, almost all the functions of front-end engineering can be completed

  • Rollup is just an ESM packer

  • Provide an efficient packer that takes full advantage of ESM features

The rollup instance

  • Project directory
src
 - index.js
 - logger.js
 - messages.js
package.json
Copy the code
  • The file content
// message.js
export default {
    hi: 'hello world'
}
// logger.js
export const log = msg => {
    console.log(msg)
}
export const error = msg => {
    console.error(msg)
}
// index.js
import { log } from './logger.js'
import message from './message.js'

const msg = messages.hi

log(msg)
Copy the code
  • Yarn add rollup –dev // There is a rollup command in the. Bin directory

  • Yarn rollup // If no parameter is specified, rollup help information is printed
  • Yarn rollup./ SRC /index.js –format iife // Specifies the path to package the file and the output format
  • Rollup turns tree shaking on by default

Rollup configuration file

  • rollup.config.js
Export default {// Input file path input:' SRC /index.js', // Output file path output: {file:'dist/bundle.js', // Output format:'iife'}}Copy the code
  • Yarn rollup –config // The configuration file is not used by default, so you need to specify the configuration file. If there is only one configuration file, you do not need to specify the configuration file, only –config is required

Three rollup uses plug-ins

  • Plug-ins are the only way rollUp extends
  • yarn add rollup-plugin-json –dev
// rollup.config.js import json from 'rollup-plugin-json' export default { input:'src/index.js', output: {file:'dist/bundle.js', format:'iife'}, plugins: {file:'dist/bundle.js', format:'iife'}Copy the code
  • With this plug-in, you can import JSON as an import

Rollup Loads the NPM module

  • Rollup can only load modules by file path, not by module name like Webpack
  • Rollup provides rollup-plugin-node-reslove to bridge the gap
  • yarn add rollup-plugin-node-reslove –dev
// rollup.config.js
import json from 'rollup-plugin-json'
import reslove from 'rollup-plugin-node-reslove'

export default {
    input:'src/index.js',
    output: {
        file:'dist/bundle.js',
        format:'iife'
    },
    plugins:[
        json(),
        resolve()
    ]
}
Copy the code
  • This allows you to import the NPM module directly elsewhere by module name
//index.js
import _ from 'lodash-es'
Copy the code
  • Yarn rollup –config // Package
  • Rollup can only handle ESmodule versions, so lodsh imported here will need to be handled by other modules

Rollup loads CommonJS module

// rollup.config.js
import json from 'rollup-plugin-json'
import reslove from 'rollup-plugin-node-reslove'
import commomjs from 'rollup-plugin-commonjs'

export default {
    input:'src/index.js',
    output: {
        file:'dist/bundle.js',
        format:'iife'
    },
    plugins:[
        json(),
        resolve(),
        commonjs()
    ]
}
Copy the code
  • This can then be exported from the commonJS module in other files
// cjs-common.js
module.exports = {
    foo:'bar'
}
// index.js
import cjs from './cjs-common'
Copy the code
  • yarn rollup –config
  • So there’s common code in the bundle as well

Six rollup code split

  • Rollup also supports code splitting via dynamic imports
// index.js

import('./logger').then(({log})=>{
    log('code splitting')
})
Copy the code
  • Yarn rollup –config // If packaging is used directly, an error will be reported. The export format cannot be IIFE, but can be exported in AMD mode
  • If the package is dynamic, you cannot specify a file output. You need to change the output file mode
Export default {input:' SRC /index.js', output: {// Replace output file dir: 'dist', format:' AMD '},}Copy the code
  • Running the package again generates two files

Seven rollup multi-entry packing

[' SRC /index.js',' SRC/albu.js '], // or in the form of an object // multi-entry packaging will automatically extract the public module, Input :{foo:' SRC /index.js', bar:' SRC /album.js'} Output :{dir: 'dist', format:' AMD '},}Copy the code

Note: THE AMD format cannot be directly referenced to the page, it needs to conform to the AMD standard introduction method

  • Advantages:

    • The output is flatter
    • Automatically removes unreferenced code
    • The package results are still fully readable

  • Disadvantages:

    • Loading non-ESM third-party modules is complicated

    • Modules end up packaged into a function that does not implement HMR

    • Browser environment, code split depends on AMD libraries

  • The application selects WebPack

  • Library/framework development uses rollup