使用 rollup 打包启动项目 #

在之前的教程介绍过 webpack 的使用，如何使用 webpack 构建我们的项目。本篇文章将要介绍如何使用 rollup.js 作为 webpack 的替代品打包一个前端项目。

要实现的功能很简单：

通过 rollup 可以打包项目
支持 typescript 语法
可以启动本地服务打开项目，并监听（watch）项目的变化，实时更新网页

写这篇文章时，我使用的是最新版的 nodejs 版本。

$ node -v
v18.12.0

初始化项目、安装依赖 #

1）初始化项目

使用如下命令创建一个项目（package.json 文件）

npm init

安装依赖

首先安装程序所需的 package。

安装 rollupjs:

$ npm install rollup --save-dev

为了支持 typescript 语法，安装 @rollup/plugin-typescript、rollup-plugin-dts（方便生成 ts 声明文件）和 typescript：

$ npm install @rollup/plugin-typescript rollup-plugin-dts typescript --save-dev

其中某个 package 需要依赖 tslib，所以安装 tslib:

$ npm install tslib --save-dev

启动本地服务，使用 web-dev-server，需要安装 @web/dev/server:

$ npm install @web/dev-server

为了方便脚本执行，我还安装了 concurrently，这样我可以同时执行多个命令：

$ npm install concurrently --save-dev

配置文件 #

1）rollup 的默认配置文件为 rollup.config.js，在项目根目录创建 rollup.config.js 文件并输入以下内容：

import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

const config = [
    {
        input: 'src/index.ts',
        output: [
            {
                file: './lib/index.esm.js',
                format: 'es',
                sourcemap: true,
            }
        ],
        plugins: [
            typescript({
                tsconfig: './tsconfig.json'
            })
        ]
    },
    {
        input: "src/index.ts",
        output: [{ file: "lib/index.d.ts", format: "es" }],
        plugins: [dts()]
    }
]
export default config;

2）在项目根目录下创建 tsconfig.json 文件输入以下配置：

{
    "compilerOptions": {
        "sourceMap": true,
        "target": "es2015",
        "module": "es2015",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "lib": [
            "es2017",
            "DOM"
        ],
        "strict": true,
        "esModuleInterop": false,
        "outDir": "out-tsc",
        "rootDir": "./",
        "allowJs": true,
        "noImplicitAny": true
    },
    "include": [
        "./src/**/*.ts"
    ]
}

3）配置 web-dev-server 配置，项目根目录下创建 web-dev-server.config.json 文件，输入以下内容：

export default {
    port: 8000,
    nodeResolve: true,
    open: true,
    watch: true,
    appIndex: "index.html"
};

当我们使用 wds 命令启动服务时，会默认打开浏览器，端口为 8000，并监听本地文件的变化。

其中 appIndex 表示要启动的项目 html 文件。

4）配置脚本命令

在 package.json 文件添加 scripts：

{
    ...
    "scripts": {
        "clear": "rm -rf lib/",
        "build": "npm run clear && rollup -c",
        "dev": "concurrently 'rollup -c -w' 'wds'",
    },
    ...
}

其中包含三个命令：

clear: 删除构建内容
build: 使用 rollup 构建项目
dev: 利用 concurrently 同时执行两个命令，使用 rollup 打包项目并监听项目，项目一旦发生变化就重新打包，使用 web-dev-server 启动本地服务

当本地开发时，执行 npm run dev，打包执行 npm run build。

（完）