使用rollup构建npm包

本文大致梳理了使用 rollup 打造自己 npm 包的流程

1.安装

安装 rollup: yarn add rollup -D

2.配置文件

新建 rollup.config.js 配置文件：

// rollup.config.js
import pkg from './package.json'
import babel from 'rollup-plugin-babel'

export default {
  input: 'src/index.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs',
    },
    {
      file: pkg.module,
      format: 'esm',
    },
    {
      file: pkg.browser,
      format: 'umd',
      name: pkg.name
    },
  ],
  plugins: [
    babel()
  ]
}

3.babel

新建 .babelrc 配置文件：

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": ["array-includes"]
}

4.package.json

往 package.json 文件中新增 scripts 命令: build 用于打包：

// package.json
{
  "name": "monitor",
  "version": "1.0.0",
  "description": "monitor",
  "main": "lib/monitor.cjs.js",
  "module": "lib/monitor.esm.js",
  "browser": "lib/monitor.browser.js",
  "scripts": {
    "build": "rollup -c"
  },
  "author": "****",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "babel-plugin-array-includes": "^2.0.3",
    "rollup": "^2.59.0",
    "rollup-plugin-babel": "^4.4.0"
  }
}

执行 npm run build 查看打包结果

5.如何使用

// 方式1: import
import Monitor from 'monitor'
console.log(new Monitor())

// 方式2: require 的方式，适用于 NodeJS
const Monitor = require('monitor')
console.log(new Monitor())

// 方式3: 在 HTML 文件中使用 script 标签加载，此时会在 window 上挂载一个 Dry 的变量，比如
<script src="node_modules/monitor/lib/monitor.browser.js"></script>
<script>
  console.log(new Monitor())
</script>