Rollup-cli-build NPM

一般在开发 npm 包时，需要构建多种模块的代码，比如，CommonJs、Es Module。大部分实现方法是通过命令行设置不同的环境变量。但是，如果环境变量特别多，怎么设置？能不能像 vue-cli 一样，使用.env.[mode]文件来配置呢。没有找到对应的方法，然后，就看了vue-cli-service的实现逻辑，模仿写了这个 rollup + dotenv + rollup-plugin-replace 的小工具。

rollup-cli-build

简介

在项目的根目录下创建.env或.env.production和rollup.config.js文件设置/使用环境变量，并执行rollup-cli-build --mode production命名，工具就会加载对应的环境变量，并且会把CLIENT__APP__*开头的环境变量写入客户端代码。使用rollup-plugin-replace实现。

同时也内置了压缩代码工具rollup-plugin-uglify，默认开启压缩，当然，也可自定义覆盖，可禁用，具体见下文。

注：您无需安装 Rollup，工具已内置。

安装

npm

npm install rollup-cli-build --save-dev

yarn

yarn add rollup-cli-build -D

使用

环境变量

一、在项目根目录创建以下文件来设置环境变量：

.env                # loaded in all cases
.env.local          # loaded in all cases, ignored by git
.env.[mode]         # only loaded in specified mode
.env.[mode].local   # only loaded in specified mode, ignored by git

例如，需要构建 commonjs 和 umd 俩种模块包，根目录创建.env.cjs 和.env.umd

# .env.cjs
CUSTOM_MODE=cjs

# .env.umd
CUSTOM_MODE=umd

二、在package.json中，设置不同环境 build 命令：

{
  "scripts": {
    "build:[mode]": "rollup-cli-build --mode [mode]", // [mode]与.env.[mode]保持一致
    "build:cjs": "rollup-cli-build --mode cjs", // 例子
    "build:umd": "rollup-cli-build --mode umd", // 例子
    ...
  }
}

三、在根目录创建rollup.config.js文件

文件中即可使用环境变量

// rollup.config.js
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import json from "@rollup/plugin-json";
export default {
  input: "src/index.js",
  plugins: [
    json(),
    commonjs({
      include: /node_modules/,
    }),
    resolve({
      browser: process.env.CUSTOM_MODE === "umd",
    }),
  ],
  output: [
    {
      file: `build/index.${process.env.CUSTOM_MODE}.js`,
      format: process.env.CUSTOM_MODE,
    },
  ],
};

四、运行构建对应命令即可根据 mode 读取不同的环境变量，进行构建。

yarn build:cjs
or
npm run build:cjs

上面演示了运行不同的 build 命令读取对应的环境变量，如果，需要将环境变量打包至代码中，请命名以 CLIENT__APP__*开头的变量。内置使用rollup-plugin-replace。

# .env.cjs
CUSTOM_MODE=cjs
# 默认打包至客户端代码中
CLIENT__APP__URL=https://www.npmjs.com

uglify 代码

默认开启rollup-plugin-uglify进行编译，默认配置如下：

var { uglify } = require("rollup-plugin-uglify");

function getUglifyPlugin() {
  return uglify({
    mangle: {
      toplevel: true,
    },
  });
}

如不满足您的需求，请查看下文自定义 uglify 配置。

自定义 uglify 配置

目前，不支持扩展 uglify 配置，因为，不想破坏rollup 原本的配置，增加用户理解成本。当工具识别到您自定义配置 uglify 时，内置的 uglify 将禁用。如果，您发现工具没有禁用 uglify，可以通过命令行，手动禁用 uglify，见下文。

# 下载
yarn add rollup-plugin-uglify -D

// 在rollup.config.js中，根据自己需求配置
import { uglify } from "rollup-plugin-uglify";
export default {
  ...
  plugins: [
    uglify({
      mangle: {
        toplevel: true,
        properties: true,
      },
    })
  ],
  ...
};