使用rollup配置创建libary并发布至npm详尽流程

全局安装rollup

npm install rollup --global

终端中使用rollup，如果有信息输出，则说明rollup安装成功。

初始rollup

创建main.js，并输入以下内容

const foo = "hello world."

export default function () {
  console.log(foo)
}

终端中使用：

rollup .\main.js --file bundle.js --format cjs

可以发现同级目录中输出了bundle.js

让我们来看看，命令行具体做了什么。rollup处理main.js，打包导出为文件bundle.js，打包的类型是cjs即CommonJs。

// rollup 导出库的快捷命令行
/**
 * 导出umd模块
 * rollup .\main.js --file bundle.js --format umd --name lib
 * rollup .\main.js -o bundle.js -f umd -n lib
 * rollup .\main.js -o bundle.js -f umd -n lib
 * 
 * 导出cjs模块
 * rollup .\main.js --file bundle.js --format cjs
 * rollup .\main.js -o bundle.js -f cjs
 * 
 */

完整配置

1. 新建项目文件夹，在文件夹中，初始化项目

npm init -y

2. 创建src/ ,example/ 以及 config/ 文件夹

3. src/下新建入口文件main.js 以及 示例文件 utils.js

main.js

import { sum } from "./utils"

export { sum }

utils.js

/**
 * 计算两个数值的和
 * @param {number} a
 * @param {number} b
 */
export function sum(a, b) {
  return a + b
}

4. config.js文件夹中，新建rollup.config.js文件

rollup.config.js

const path = require("path")

export default {
  input: path.resolve(__dirname, "../src/main.js"),
  output: {
    file: path.resolve(__dirname, "../dist/bundle.js"), // 导出文件
    format: "umd", // 打包文件支持的形式
    name: "MyBundle" // 页面引入时，注入的全局变量
  },
}

package.json中配置命令，以及修改引入库的入口文件，以及npm发布的files文件夹内容。注意包名name，避免与现有已存在的包重名，重名会导致包发布失败。

{
  "name": "lib",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup --config config/rollup.config.js"
  },
  "files": [
    "dist"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5. npm发布

可参考博主文章：https://blog.csdn.net/weixin_37861326/article/details/80052680

到此，我们可以发布一个可以使用的npm包了。

进阶配置

1. 打包之前清空打包输出的项目文件夹

安装 rollup-plugin-clear

npm i rollup-plugin-clear --save-dev

rollup.config.js中plugins 加入clear配置

import clear from "rollup-plugin-clear" // 清空文件夹插件

const path = require("path")

export default {
  input: path.resolve(__dirname, "../src/main.js"),
  output: {
    file: path.resolve(__dirname, "../dist/bundle.js"), // 导出文件
    format: "umd", // 打包文件支持的形式
    name: "MyBundle" // 页面引入时，注入的全局变量
  },
  plugins: [
    clear({
      targets: ['dist']
    })
  ]
}

2. 输出libary进行压缩

安装rollup-plugin-uglify

npm i rollup-plugin-uglify --save-dev

引入并使用

import clear from "rollup-plugin-clear" // 清空文件夹插件
import { uglify } from "rollup-plugin-uglify" // 输出libary代码压缩

const path = require("path")

export default {
  input: path.resolve(__dirname, "../src/main.js"),
  output: {
    file: path.resolve(__dirname, "../dist/bundle.js"), // 导出文件
    format: "umd", // 打包文件支持的形式
    name: "MyBundle", // 页面引入时，注入的全局变量
  },
  plugins: [
    clear({
      targets: ["dist"]
    }),
    uglify()
  ],
}

3. 将commonjs模块转成es5供rollup使用，以及告诉rollup如何查找外部库

安装rollup-plugin-commonjs 和 rollup-plugin-node-resolve

npm i rollup-plugin-commonjs --save-dev
npm i rollup-plugin-node-resolve --save-dev

添加对应的配置

import clear from "rollup-plugin-clear" // 清空文件夹插件
import { uglify } from "rollup-plugin-uglify" // 输出libary代码压缩
import commonjs from "rollup-plugin-commonjs"
import resolve from "rollup-plugin-node-resolve"

const path = require("path")

export default {
  input: path.resolve(__dirname, "../src/main.js"),
  output: {
    file: path.resolve(__dirname, "../dist/bundle.js"), // 导出文件
    format: "umd", // 打包文件支持的形式
    name: "MyBundle", // 查找外部库
  },
  plugins: [
    clear({
      targets: ["dist"],
    }),
    commonjs(),
    resolve(),
    uglify(),
  ],
}

4. 解决库文件中引入的第三方库，无法加载到libary的问题

参考博主文章：https://blog.csdn.net/weixin_37861326/article/details/107006321

5. 处理es6语法，安装rollup-plugin-babel

npm i rollup-plugin-babel --save-dev

// 安装babel相关依赖
npm i @babel/core @babel/preset-env core-js@3 --save-dev

新建.babelrc文件，增加编译配置

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

rollup.config.js中引入并配置

import clear from "rollup-plugin-clear" // 清空文件夹插件
import { uglify } from "rollup-plugin-uglify" // 输出libary代码压缩
import commonjs from "rollup-plugin-commonjs"
import resolve from "rollup-plugin-node-resolve"
import nodePolyfills from "rollup-plugin-node-polyfills"
import babelPlugin from "rollup-plugin-babel"

const path = require("path")

export default {
  input: path.resolve(__dirname, "../src/main.js"),
  output: {
    file: path.resolve(__dirname, "../dist/bundle.js"), // 导出文件
    format: "umd", // 打包文件支持的形式
    name: "MyBundle", // 页面引入时，注入的全局变量
  },
  plugins: [
    clear({
      targets: ["dist"],
    }),
    commonjs(),
    resolve(),
    uglify(),
    nodePolyfills(),
    babelPlugin({
      exclude: "node_modules/**", // 只编译我们的源代码
      runtimeHelpers: true,
    }),
  ],
}

运行 

npm run build

即可打包输出我们的libary，自此大概的rollup配置已完成，后续可以根据自己的需求适当调整改动。

------------------
本文为个人总结，如若转载请注明来源。