Rollup.js：如何从多导出JS文件中提取单个导出生成IIFE？

问题背景 #

我有一个包含多个导出的.js文件：

// some-functions.js

export function plusOne(value){
    return value + 1
}

export function minusOne(value){
    return value - 1
}

我希望在rollup.config.js中导入其中的plusOne函数，并将其打包为iife格式，当前配置如下：

// rollup.config.js

export default {
    input:'./some-functions.js',
    /* Named export goes here? */
    output:{
        name:'plusone',
        file:'./rolled-up-functions/plus-one.js',
        format: 'iife'
    }
}

请问能否通过Rollup.js实现该需求？如果可以，具体该如何操作？如果不行，能否推荐其他可实现该需求的工具？

回答 #

可以实现，以下是两种具体操作方式：

方法一：创建包装入口文件（推荐） #

Rollup自带的tree-shaking特性会自动移除未被引用的代码，因此你可以新建一个仅导出plusOne的入口文件，让Rollup只打包目标函数：

1. 新建plus-one-entry.js文件：

// plus-one-entry.js
import { plusOne } from './some-functions.js';
export default plusOne;

2. 修改rollup.config.js的input指向这个新文件：

// rollup.config.js
export default {
    input: './plus-one-entry.js',
    output: {
        name: 'plusone',
        file: './rolled-up-functions/plus-one.js',
        format: 'iife'
    }
}

执行打包命令后，生成的IIFE会将plusOne函数直接挂载到全局变量plusone上，并且不会包含minusOne的代码。

方法二：直接配置Rollup输出指定导出 #

如果你不想额外创建入口文件，可以通过配置output.exports实现，不过这种方式会将导出作为对象属性挂载：

修改rollup.config.js如下：

// rollup.config.js
export default {
    input: './some-functions.js',
    output: {
        name: 'plusone',
        file: './rolled-up-functions/plus-one.js',
        format: 'iife',
        exports: 'named'
    },
    treeshake: true // 默认开启，确保未使用的代码被移除
}

打包后，全局变量plusone会是一个包含plusOne方法的对象（即window.plusone.plusOne），如果需要直接将函数作为全局变量，建议使用第一种方法。

备选工具：ESBuild #

如果不想用Rollup，ESBuild是一个更轻量快速的选择，只需通过命令行即可完成打包：

1. 安装ESBuild：

npm install esbuild --save-dev

2. 执行打包命令（需配合之前创建的plus-one-entry.js）：

npx esbuild ./plus-one-entry.js --bundle --format=iife --global-name=plusone --outfile=rolled-up-functions/plus-one.js

ESBuild会自动完成tree-shaking，只保留plusOne的代码，打包速度远快于Rollup。

内容的提问来源于stack exchange，提问作者Nathaniel