rollup打包一个工具库并发布到npmRollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 对代码模块使用新的标准化格式，这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6 模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

本篇文章将会详细介绍用 rollup + typescript 打包一个支持多模块系统的工具库的过程，并发布到 npm。本文代码在文章末尾。

本文代码

初始化项目

首先需要初始化一个新的项目。

npm init

安装 rollup

yarn add -D rollup

创建 rollup.config.js 配置文件

export default [
  {
    input: path.resolve(__dirname, "./src/index.ts"),
    output: [
      {
        file: path.resolve(__dirname, "dist", "index.esm.js"),
        format: "esm",
      },
    ]
]

梳理需要输出的产物

es6 的包 (esm)
页面中直接引入(umd)
在 nodejs 环境中使用(cjs)

构建工具

使用 EsBuild 进行 ts => js的编译
使用rollup-plugin-dts进行 d.ts的文件的编译

typescript 支持

安装

yarn add -D typescript

添加配置文件 tsconfig.json

tsconfig.json指南

{
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./esm"
  },
  "include": ["src/**/*"]
}

安装rollup编译插件

esbuild

实现 ts => js

yarn add esbuild rollup-plugin-esbuild -D

使用

export default {
  plugins: [    
    esbuild({
      target: 'es2018'
    })
  ]
}

处理 JSON 插件

安装

npm i rollup-plugin-json -D

使用方法

export default {
    plugins: [ json() ]
};

esm 中使用 cjs 插件

直接使用会出现如下错误：

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
the-answer (imported by src/main.js)

安装

yarn add  rollup-plugin-node-resolve -D

使用

export default {
    plugins: [ resolve() ]
};

需要使用最新的 JS 语法，babel 转码

.babelrc 和 babel.config.js 的区别

.babelrc 和 .babel.config.js 区别

7.8 版本之后文件名可使用 babel.config.json

安装 rollup-plugin-babel

yarn add  rollup-plugin-babel -D

安装 babel 核心包： @babel/core, @babel/preset-env

yarn add @babel/core @babel/preset-env -D

添加babel 配置文件

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "node": "current"
      }
    ]
  ]
}

使用方法

export default {
    babel({
            exclude: 'node_modules/**' // only transpile our source code
        })
};

压缩代码

旧rollup版本安装 rollup-plugin-uglify,新版本安装rollup-plugin-terser

yarn add -D rollup-plugin-terser

添加rollup配置

export default {
    plugins: [
      terser(),
    ],
}

开启 sourcemap

rollup 内置支持

export default {
      output: {
        file: './dist/bundle.js',
        format: 'cjs',
        sourcemap: true, // 开启 sourcemap
    },
}

编译 ts 类型

安装插件

yarn add -D rollup-plugin-dts

指定配置文件

[
  {
    input: path.resolve(__dirname, "./src/index.ts"),
    output: [
      {
        dir: path.resolve(__dirname, "dist"),
        format: "dist",
      },
    ],
    external: [],
    plugins: [dts({ respectExternal: true })],
  },
]

测试

这里引入 ts-jest

安装 jest

npm install jest -D

添加 typescript 支持

npm install @babel/preset-typescript

添加babel.config.json 配置文件

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": { "node": "current" }
      }
    ],
    "@babel/preset-typescript"
  ]
}

添加测试 case

import { add } from "../src/add";
test("parse", () => {
  expect(add(2, 1)).toBe(3);
});

发布到 NPM 配置

{
  "files": [
    "dist",
    "lib",
    "esm"
  ],
  "main": "./dist/index.common.js",
  "module": "./dist/index.esm.js",
  "typings": "./dist/index.d.ts",
}

files 指定要发布到npm的文件
main 指定 commonjs 入口文件
module 指定 esmodule 的入口文件
typings 指定TS类型入口文件

发布

使用 npm publish 发布到npm仓库，注意，每次发布需要更新 package.json 的版本号

{
  "name": "ts-rollup-lib-template",
  "version": "1.0.7"
}