基于rollup.js 的多组件构建「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」前

「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」

Hope is a good thing, maybe the best of things. And no good thing ever dies.

前言

目前，在前端的生态中，有很多的构建工具，如：Webpack、Gulp、Rollup、Vite、Parcel... Webpack是我们的日常的业务开发过程中使用的比较多的，在社区中拥有比较多用户和粉丝。经常会看到社区的开发者会说：“构建复杂的应用使用Webpack，构建第三类库使用Rollup”。今天，我来简单总结一下自己在使用 Rollup 进行组件打包的一些心得。

概述

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码（自带 Tree-Shaking）。

需求场景

自己开发了几个常用的前端组件，考虑着像 antd 一样把自己常用的组件库进行打包发布，以便以后复用

Rollup 配置

依赖安装

npm i --save-dev rollup @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-postcss rollup-plugin-terser

@rollup/plugin-babel rollup 的 babel 插件
@rollup/plugin-commonjs 将 CommonJS 的模块转换为 ES2015 供 rollup 处理
@rollup/plugin-node-resolve 让 rollup 能够识别 node_modules 的第三方模块
rollup-plugin-postcss 编译 *.css源文件成压缩文件
rollup-plugin-terser 用于压缩 ES6 代码，功能和 uglify-js 相同，但 uglify-js 不支持 ES6

配置 .babelrc.json

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    "@babel/react"
  ]
}

modules 必须设置为 false，不然在 Rollup 处理代码前，Babel 已经将代码默认处理成了 CommonJS 的模块，Rollup 处理时会出错。

完整的配置

该配置是进行多组件打包的方式，每个组件同时生成 'es' 和 'lib' 两种格式的压缩文件


import babel from '@rollup/plugin-babel'
import resolve from '@rollup/plugin-node-resolve'
import postcss from 'rollup-plugin-postcss'
import commonjs from '@rollup/plugin-commonjs'
import {terser} from 'rollup-plugin-terser'

import generate from './generate'; // 获取需要打包的组件

export default () => {

  const config = generate.components.map(ele => {
    return {
      input: './src/component/' + ele + '/index.jsx',
      output: [
        {
          file: './test2/' + ele + '/lib/index.js',
          format: 'umd',  // Universal Module Definition, works as amd, cjs and iife all in one
          name: ele, // Necessary for iife/umd bundles that exports values in which case it is the global variable name representing your bundle. Other scripts on the same page can use this variable name to access the exports of your bundle.
          exports: 'auto',
        },
        {
          file: './test2/' + ele + '/es/index.js',
          format: 'es',
          exports: 'auto',
        },
      ],
      plugins: [
        resolve({ extensions: ['.jsx', '.js', '.less', '.scss'] }),
        babel({
          babelHelpers: 'bundled',
          exclude: 'node_modules/**', // 只编译我们的源代码
        }),
        commonjs(),
        postcss({
          extract: true,
          extensions: ['.less', '.scss'],
        }),
        terser()
      ],
      // 指出应将哪些模块视为外部模块
      external: ['react', 'react-dom', 'antd', '@ant-design/icons'],
    }
  })

  return config
}

打包效果

输出的文件格式

Rollup配置项 rollupjs.org/guide/en/#b…

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏

欢迎关注我的微信公众号，一起交流技术，微信搜索 🔍 ：「 五十年以后 」

基于rollup.js 的 多组件构建

前言

概述