最近在弄一个小网页，想着用JavaScript没有类型匹配不太舒服，自己又喜爱TypeScript，又想起了Rollup所以就尝试着使用了一下。

Rollup的介绍

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。了解更多

环境

1.Windows 10
2.Node v12.14.1
3.Typescript v3.8.3
4.Rollup v2.6.1
5.rollup-plugin-commonjs “^10.1.0”
6.rollup-plugin-node-resolve “^5.2.0”

流程

1
2
3
4
5

npm init -y
tsc --init
npm i rollup -g
npm i rollup-plugin-node-resolve --save-dev
npm i rollup-plugin-node-resolve --save-dev

首先创建一个项目使用的文件夹，依次使用上面命令进行项目初始化，完成后会得到package.json、tsconfig.json两个文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "DOM",
      "ES5"
    ],
    "outDir": "bin-debug"
  },
  "include": [
    "main.ts",
    "src/*"
  ]
}

将tsconfig.json改为上面的内容，关于其他编译的选项就不细说了，具体可以看TypeScript的官方文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    input: "bin-debug/main.js",
    plugins: [
        resolve(),
        commonjs()
    ],
    output: {
        file: 'bin/bundle.js',
        format: 'iife'
    }
}

根目录下新建一个rollup.config.js为Rollup配置文件，内容如上。rollup也有许多的编译选项，具体可以看Rollup的官方文档。

1
2
3
4
5

// main.ts
import ClassA from "./src/ClassA";

let inst = new ClassA();
inst.log("hello world!");

1
2
3
4
5
6

// src/ClassA.ts
export default class ClassA {
    public log(...args: any[]) {
        console.log("ClassA.log", ...args);
    }
}

初始化完成后在项目根目录下创建一个main.ts文件作为入口，创建一个src文件夹用于存放其他代码文件，在src目录下创建一个ClassA.ts文件用于测试打包。

1

> main.ts  package.json  rollup.config.js  src/ClassA.ts  tsconfig.json

如果过程中没有错误项目文件夹将会有这些上面文件。

1
2

tsc
rollup -c

使用上面两条命令。tsc会将.ts代码文件转换为.js代码后按原路径写入在bin-debug目录下。rollup -c将会以bin-debug目录下main.js文件为入口进行打包，打包完成后会生成bin目录并在此目录下生成bundle.js文件，bundle.js中的代码逻辑可以直接在浏览器中执行。

后记

懒，所以这里就粗略的写了一下大概过程。
(实际上打包js代码的工具有很多种，只是刚好对Rollup有印象便使用了它，感觉倒是还不错。