引言
当我们在编写前端项目时，往往会有多个入口文件，这些入口文件都要经过打包处理，以方便我们在浏览器上进行正常访问。在传统的打包工具中，我们需要手动地在配置文件中指定每一个入口文件，这样就显得比较麻烦。而 @rollup/plugin-multi-entry 这个 npm 包就是为了解决这个问题而产生的，它可以自动地将某个指定目录下的全部 js 文件都打包到一个输出文件中，极大地方便了我们的开发工作。
安装
在使用 @rollup/plugin-multi-entry 之前，我们需要确保我们已经安装了 rollup，然后可以通过以下命令进行安装：
npm install --save-dev @rollup/plugin-multi-entry
使用方法
安装完成之后，在我们的项目中使用该插件也是比较方便的。我们只需要在 rollup 配置文件中引入该插件，然后在 output 中指定一个 js 文件名就可以了。具体代码如下：
-- -------------------- ---- -------
------ ---------- ---- -----------------------------
------ ------- -
------ -----------------------------
------- -
----- --------------------
------- ------
--
-------- -
------------
-
-上述配置文件中，我们输入的是某个目录下的多个 js 文件，然后使用 multiEntry 插件就可以将这些文件自动打包到一个文件中，输出一个 iife 格式的 js 文件。
示例代码
为了更好地了解该插件的使用方法，下面我们来看一个简单的示例。
在这个示例中，我们首先需要在项目根目录下创建一个 dist 目录，然后在该目录下创建 a.js 和 b.js 两个文件。内容分别是：
a.js
export const a = () => {
console.log('this is a.js')
}b.js
export const b = () => {
console.log('this is b.js')
}然后我们在项目根目录下创建一个 index.js 文件，内容如下：
import { a } from './dist/a.js'
import { b } from './dist/b.js'
a()
b()使用多入口插件之前，我们的 rollup.config.js 配置文件需要这样指定：
export default {
input: './index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
name: 'myModule'
}
}但是我们如果使用 @rollup/plugin-multi-entry 插件时，我们的 rollup.config.js 配置文件可以简化为如下代码：
-- -------------------- ---- -------
------ ---------- ---- -----------------------------
------ ------- -
------ --------------
------- -
----- -----------------
------- -------
----- ----------
--
-------- -
------------
-
-上述代码中，我们只需将 input 配置为需要打包的文件路径即可，无须再填写每个文件名，而 multiEntry 插件就会自动将该目录下的所有 js 文件打包到 bundle.js 文件中。
这样一来，我们就可以直接通过浏览器打开 dist/bundle.js 文件，正常地运行我们的代码了。
总结
通过使用 @rollup/plugin-multi-entry 这个 npm 包，我们可以大大地简化前端开发中涉及到多个入口文件的问题，极大地提高开发效率。上述示例代码可以让我们更好地了解该插件的使用方法，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/a-rollup-plugin-multi-entry