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打包并发布自己的工具库》

最后

以上就是幸福夕阳为你收集整理的rollup配置工具库开发环境的全部内容，希望文章能够帮你解决rollup配置工具库开发环境所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。