编写一个 TypeSript 组件

组件采用 TypeScript 的形式开发，所以先搭建基础的 TypeScript 开发环境

npm init -yes // 生成基础的package.json
npm install -g typescript
tsc -init // 生成tsconfig.json

在根目录创建一个src 文件并且创建一个 utils.ts 文件编写组件内容，此时的文件目录是这样的

rollupUtils
├── src
│   └── utils.ts
├── package.json
└── tsconfig.json

先随便编写一个组件，这里编写了一个设置和获取 cookie 的方法

/* utils.js */

export const setCookie = (key: string, value: string) => {
  document.cookie = `${key}=${value};`;
};

export const getCookie = (key: string): string => {
  const items: string[] = document.cookie.split('; ');
  for (let i = 0; i < items.length; i += 1) {
    const item: string[] = items[i].split('=');
    if (key === item[0] && item.length === 2) {
      return decodeURIComponent(item[1]);
    }
  }
  return '';
};

修改一下 tsconfig 的配置

/* tsconfig.json */

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "esnext"],
    "outDir": "lib",
    "declaration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react"
  },
  "include": ["src"]
}

// 附上配置文档： https://www.tslang.cn/docs/handbook/compiler-options.html

执行一下 tsc 命令，会根据 tsconfig.json 的配置进行编译生成出一个文件名为 lib 的包并将类型分离出来

使用 Rollup 构建 UMD 包

UMD 叫做通用模块定义规范（Universal Module Definition）就是一种javascript通用模块定义规范，让你的模块能在javascript所有运行环境中发挥作用。

先安装一下 rollup 和解析 ts 的包

npm i -D rollup rollup-plugin-typescript2 typescript

在根目录创建一个 rollup.config.js

/* rollup.config.js */

import typescript from 'rollup-plugin-typescript2';
import { version } from './package.json';

export default {
  input: 'src/utils.ts',  // 入口文件
  output: {
    name: 'my_utils', // umd 模式必须要有 name  此属性作为全局变量访问打包结果
    file: `dist/@${version}/index.js`,
    format: 'umd',
    sourcemap: true,
  },
  plugins: [
    typescript({
      tsconfigOverride: {
        compilerOptions: {
          declaration: false, // 输出时去除类型文件
        },
      },
    }),
  ],
};

执行 rollup -c 进行构建, 效果如下:

babel 编译

安装一系列的 babel 包

npm i -D @babel/core @babel/plugin-transform-runtime @babel/preset-env @rollup/plugin-babel @babel/preset-typescript

创建 .babelrc 文件进行 babel 配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "loose": true,
        "targets": {
          "browsers": "> 1%, IE 11, not op_mini all, not dead",
          "node": 8
        }
      }
    ],
    ["@babel/preset-typeScript"]
  ]
}

在 rollup.config.js 引入 babel

import { babel } from '@rollup/plugin-babel';
plugins:[
    babel({
      extensions: [".js", ".ts"],
      exclude: "node_modules/**",
      babelHelpers: 'bundled'
    }),
]

执行 rollup -c 进行编译

lib 包是经过 tsc 命令打包出来的并没有经过 babel 的处理。顺便处理一下吧

npm install @babel/cli -D

先执行 tsc 生成 lib 包再执行 babel 命令 babel lib --out-dir lib

压缩

安装一下压缩插件

npm install -D rollup-plugin-terser

在 rollup.config.js 添加上插件
最终的 rollup.config.js

/* rollup.config.js */

import typescript from 'rollup-plugin-typescript2';
import { babel } from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import { version } from './package.json';

export default {
  input: 'src/utils.ts',
  output: {
    name: 'my_utils',
    file: `dist/@${version}/index.js`,
    format: 'umd',
    sourcemap: true,
  },
  plugins: [
    typescript({
      tsconfigOverride: {
        compilerOptions: {
          declaration: false,
        },
      },
    }),
    babel({
      extensions: [".js", ".ts"],
      exclude: "node_modules/**",
      babelHelpers: 'bundled'
    }),
    terser(),
  ],
};

最后整理一下

删除 lib 文件夹然后再执行 tsc 将 ts 文件分离 xxx.d.ts 类型文件以及 js 文件 , 然后走一遍 babel 编译 lib 文件夹

执行 tsc 的目的是为了获取类型文件，若采用 TS 开发可引入此包

删除 dist 文件夹再通过 rollup 打包出来 UMD 模式文件

这里再安利一个插件 rimraf
重新打包的时候。需要把旧的打包文件删除，这里的用法也比较简单 rimraf <path> [<path> ...]

理清思路后 , 在package.json 下的 scripts 添加脚本
"build": "rimraf /lib/ && tsc && babel lib --out-dir lib && rimraf /dist/ && rollup -c"
接下来执行一下 build 命令

校验结果:
在页面引入 <script src="dist/@1.0.0/index.js"></script>

此处 my_utils 就是 rollup.config.js -> output 里面的 name 属性

最后贴一下 github 地址：https://github.com/Coffee-C/rollupUtils