How to use webpack and rollup to package component libraries

Preface

I made a loading style component before. In order to achieve code reusability, I packaged this small project and published it on npm. During the packaging and distribution process, I encountered errors one after another. The @buzuosheng/loading component has reached version 2.7.0. Although there are still some places to be adjusted, it is finally usable.

Comparison between webpack and rollup

Webpack is the most commonly used packaging tool among programmers. Questions related to webpack are often asked in interviews, while questions about rollup are asked much less frequently. One reason for this phenomenon is the idea of ​​using webpack for application development and rollup for library development.

However, both packaging tools have powerful plug-in development capabilities, and the functional differences are becoming increasingly blurred, but rollup is simpler to use and can produce smaller files. But when we are doing front-end applications, performance analysis often requires smaller libraries, so rollup is more in line with the requirements of development libraries.

This is a packaging experiment, and we use two tools to package the project.

Bundling with webpack

Before packaging, you need to add or change some fields in the package.json file.

{
 // The main entry module of the program. The user references the export of this module "main": "dist/bundle.js",
 // Files included in the project "files": [
  "src",
  "dist"
 ],
 // Move react and react-dom to this configuration, compatible with dependency "peerDependencies": {
  "react": "^17.0.1",
  "react-dom": "^17.0.1"
 },
}

Webpack packaging requires many libraries to process different files. This project is relatively small, so only two libraries are used.

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
 mode: 'production',
 entry: './src/Loading.jsx',
 output: {
  filename: "index.js",
  path: path.join(__dirname, "./dist/"),
  libraryTarget: 'umd',
 },
 optimization:
  minimize: false,
 },
 resolve: {
  extensions: ['.jsx']
 },
 module: {
  rules:
   {
    test: /\.css$/,
    loader: [MiniCssExtractPlugin.loader, 'css-loader?modules'],
   },
   {
    test: /\.(js|jsx)$/,
    loader: "babel-loader",
    exclude: /node_modules/,
   },
  ]
 },
 plugins: [
  new MiniCssExtractPlugin({
   filename: "main.min.css" // The file name of the extracted CSS file})
 ],
}

I should have written about the configurations for both development and production environments, but here I only wrote about the configuration for the production environment.

Use rollup

There are more libraries used in rollup.

// rollup.config.js
// Solve the problem that rollup cannot recognize commonjs import commonjs from 'rollup-plugin-commonjs'
// babel handles the conversion of es6 code import babel from 'rollup-plugin-babel'
// resolve merges the source code we wrote with the dependent third-party libraries import resolve from 'rollup-plugin-node-resolve'
// postcss processes css files import postcss from 'rollup-plugin-postcss'

export default {
 input: "src/Loading.jsx",
 // Package a cjs file and an es file output: [
  {
   file: "dist/loading.es.js",
   format: "es",
   globals:
    react: 'React',
   },
  }, {
   file: 'dist/loading.cjs',
   format: "cjs",
   globals:
    react: 'React',
   },
  },
 ],
 external: ['react'],
 plugins: [
  postcss(
   { extensions: ['.css'] }
  ),
  babel({
   exclude: "node_modules/**",
   runtimeHelpers: true,
  }),
  commonjs(),
  resolve(),
 ],
}

Send package to npm

Publishing to npm only takes a few commands.

npm pack

After packaging the project, the command line outputs detailed information about the compressed package.

Updated version

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]

Select different commands according to the size of the change.

Finally use the publish command.

npm publish

Then you will receive an email indicating that your package has been published successfully.

This is the end of this article about how to use webpack and rollup to package component libraries. For more relevant webpack and rollup packaging component library content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!