什么是 create-rollup-app
create-rollup-app 是一个 npm 包，它可以帮助前端开发者快速创建一个基于 Rollup 的项目模板，提供了一些常用的模块打包配置和工具集成，为项目搭建和开发提供了极大的便利。
为什么选择 Rollup
在前端的现代化开发中，模块化已经成为了必备的技能。而 Rollup 作为一款主打模块打包的构建工具，一直受到了广泛的关注和使用。相比其他构建工具，它能够将代码优化到极致，快速地打包出仅包含核心代码的最终输出，提升了项目的加载速度和性能表现。
使用 create-rollup-app
安装
如果您已经安装了 Node.js 和 npm，您可以直接使用下面的命令进行安装：
--- ------- -- -----------------
创建项目
在您选择的项目目录下，使用下面的命令创建项目：
--- ----------------- ----------
这里将创建一个名为 my-project 的项目，并在当前目录下生成该项目的目录和文件。
运行项目
在项目目录下，使用下面的命令运行项目：
--- --- ---
这里将启动一个开发服务器，并且监听您的代码变动，实时重新构建和刷新浏览器。
构建项目
在项目目录下，使用下面的命令进行项目打包：
--- --- -----
这里将生成优化后的项目文件，并以 CommonJS、ES module 和 UMD 等多种格式输出到 dist 目录下。
配置选项
在项目中，create-rollup-app 提供了一些默认的构建配置，如果您需要对这些配置进行自定义，可以通过修改 rollup.config.js 文件进行操作。下面是一些常用的配置选项：
- input: 入口文件，默认为 src/index.js
- output.format: 输出格式，默认为 "iife"
- output.file: 输出文件路径，默认为 "dist/bundle.js"
- plugins.babel: 是否启用 babel 转译，默认为 true
- plugins.postcss: 是否启用 postcss 处理 css，默认为 true
- plugins.vue: 是否启用 vue 模板处理，默认为 true
- plugins.analyzer: 是否启用打包分析工具，默认为 false
为了方便您了解如何进行配置，下面是一个基于 create-rollup-app 的自定义配置示例：
-- ----------------
------ ------- ---- -----------------------------
------ -------- ---- -------------------------
------ ----- ---- ----------------------
------ ------- ---- ------------------------
------ --- ---- --------------------
------ ------- ---- -------------------------
----- ------ - -------------------- --- -------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
----------
-----------
-------
-------- ------------------
---
---------
-------- -
--------------------------
------ -- ---------------------
------------------
---
-----
---- -----
--------- -
------------- -------
--
---
------ -- ----------
--
--总结
create-rollup-app 可以帮助你在项目开发的初期快速搭建出一个模块化的工程模板，避免了各种繁琐的配置和集成过程，让你专注于项目的实现和开发思路。
同时，本文也介绍了一些基本的 Rollup 的使用和配置，如果您想深入学习这方面的知识，可以继续阅读官方文档，或者查看更多的 rollup-plugin，进行更为详细的了解和实践。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559e281e8991b448d7765