rollup配置工具库开发环境

使用rollup配置ts打包前端工具库，类似lodash，dayjs之类的函数工具库，丰富函数编程的生态。

Git仓库

我配置好的仓库地址放在github的：

https://github.com/mySkey/mys-tools.git

一、生成package.json

我们可以使用以下命令创建一个默认的package.json：

npm init -y

生成以下内容：

{
  "name": "ktools",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/kagol/ktools.git"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

二、配置TypeScript tsconfig.json

• 1、全局安装TypeScript

npm i -g typescript

• 2、生成tsconfig.json配置文件

tsc --init

生成以下内容：

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */

    /* Module Resolution Options */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */

    /* Advanced Options */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

三、配置Rollup rollup.config.js

全局安装 rollup

npm i -g rollup

• 1、创建配置文件rollup.config.js

touch rollup.config.js

• 2、复制以下内容到rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import typescript from 'rollup-plugin-typescript';
import pkg from './package.json';

export default {
  input: 'src/index.ts', // 打包入口
  output: { // 打包出口
  	name: 'mySkey',
    file: pkg.browser, // 最终打包出来的文件路径和文件名，这里是在package.json的browser: 'dist/index.js'字段中配置的
    format: 'umd', // umd是兼容amd/cjs/iife的通用打包格式，适合浏览器
  },
  plugins: [ // 打包插件
    resolve(), // 查找和打包node_modules中的第三方模块
    commonjs(), // 将 CommonJS 转换成 ES2015 模块供 Rollup 处理
    typescript() // 解析TypeScript
  ]
};

• 3、在package.json中配置browser字段：

"browser": "dist/index.js",

• 4、安装Rollup和TypeScript相关依赖：

npm i -D rollup typescript tslib rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-typescript

四、自动发布脚本

如果不使用自动发布的话，每次手动发布，需要把package.json拷贝到dist目录，并且升级版本号，再执行

npm publish

明显这样每次发布还要将文件拷贝来拷贝去，又要修改包名，又要改版本号，很麻烦，可以编写脚本将这个过程自动化。

需要提前安装这两个依赖库：

npm i -D shelljs commander

• 1、拷贝文件

在package.json的scripts中增加拷贝文件的脚本：

"copy": "cp package.json README.md dist",

• 2、修改文件

新建scripts/publish.js文件，增加以下内容：

const path = require('path');
const shelljs = require('shelljs');
const program = require('commander');

const targetFile = path.resolve(__dirname, '../dist/package.json');
const packagejson = require(targetFile);
const currentVersion = packagejson.version;
const versionArr = currentVersion.split('.');
const [mainVersion, subVersion, phaseVersion] = versionArr;

// 默认版本号
const defaultVersion = `${mainVersion}.${subVersion}.${+phaseVersion+1}`;

let newVersion = defaultVersion;

// 从命令行参数中取版本号
program
  .option('-v, --versions <type>', 'Add release version number', defaultVersion);

program.parse(process.argv);

if (program.versions) {
  newVersion = program.versions;
}

function publish() {
  shelljs.sed('-i', '"name": "ktools"', '"name": "@kagol/ktools"', targetFile); // 修改包名
  shelljs.sed('-i', `"version": "${currentVersion}"`, `"version": "${newVersion}"`, targetFile); // 修改版本号
  shelljs.cd('dist');
  shelljs.exec('npm publish'); // 发布
}

publish();

这里最核心的两步：

1.修改包名
2.获取正确的版本号并修改

另外需要在package.json中增加构建的脚本命令：

"build": "rollup -c && npm run copy",
"publish": "rollup -c && npm run copy && node scripts/publish.js"

• 3、发布

发布的步骤比较简单，已经放在publish.js脚本文件中。

每次发布只需要依次运行以下命令即可：

npm run build
npm run publish -- -v 0.0.1

五、参考文献

• 《rollup打包js的注意点》
• 《手把手教你使用Rollup打包并发布自己的工具库》