从零开始用Rollup开发脚手架，打造个人专属工程化工具

前端

2023-03-10 14:21:33

打造专属脚手架，从零开始！

在前端开发的世界里，脚手架是必不可少的帮手。它就像搭积木一样，帮我们快速搭建项目框架，省去繁琐的初始化工作。今天，我们就来一步步用Rollup打造一个脚手架，让你的开发效率飙升！

脚手架：啥玩意儿？

脚手架就是个“项目生成器”，它能帮你一键创建项目结构、安装依赖、初始化配置，省去重复的繁琐劳动。有了它，你就能把更多精力投入到真正重要的开发任务上。

Rollup：模块打包神器

Rollup是我们的“打包大师”，它负责把分散的模块打包成一个完整的文件，提高网页加载速度。它支持多种模块格式，无论你是用CommonJS还是ES6模块，它都能搞定。

Rollup脚手架：从零开始

下面，我们就动手打造一个Rollup脚手架：

1. 安装Rollup

首先，用这个命令安装Rollup：

npm install -g rollup

2. 创建项目

新建一个项目文件夹，比如叫“my-scaffold”，然后进入文件夹：

mkdir my-scaffold
cd my-scaffold

3. 初始化项目

初始化项目，这样脚手架才能知道你的项目结构：

npm init -y

4. 安装依赖

脚手架需要一些帮手，这些帮手就是依赖项：

npm install --save-dev rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-terser

5. 创建脚手架脚本

脚手架的核心就是这个脚本，你可以把它命名为“scaffold.js”：

touch scaffold.js

6. 编写脚本

把下面这些代码复制粘贴到“scaffold.js”中：

const rollup = require("rollup");
const commonjs = require("rollup-plugin-commonjs");
const nodeResolve = require("rollup-plugin-node-resolve");
const terser = require("rollup-plugin-terser");

const inputOptions = {
  input: "./src/index.js",
  plugins: [
    commonjs(),
    nodeResolve(),
    terser(),
  ],
};

const outputOptions = {
  file: "./dist/index.js",
  format: "umd",
  name: "MyScaffold",
};

async function build() {
  const bundle = await rollup.rollup(inputOptions);
  await bundle.write(outputOptions);
}

build();