• 前言
• 基本运行
• 压缩之terser
• 导入JSON
• babel加载react
  • 安装依赖
  • 启环境测试
• 使用ts

前言

我之前写过的一个功能想打包到我的个人项目里展示, 因为里面用了很多antd和styled-component, 而个人项目 用的tailwind, 对css-in-js不是很友好, 而且也不想集成antd, 干脆把这个功能单独打成npm包, 学习一下打npm package, 后期也考虑开源.

基本运行

根据官方教程, 以下这点东西就能基本跑起rollupdemo:

npx rollup --config

文件结构:

├── package.json
├── rollup.config.mjs
├── src
│   └── main.js

内容也很少file内容

// main.js
export default function () {
  console.log(123)
}

// rollup.config.mjs
export default {
	input: 'src/main.js',
	output: {
		file: 'bundle.js',
		format: 'cjs'
	}
};

压缩之terser

@rollup/plugin-terser

导入JSON

@rollup/plugin-json

babel加载react

安装依赖

yarn add -D @babel/core @babel/preset-react @rollup/plugin-babel
yarn add -D react react-dom

启环境测试

"scripts": {
  "watch": "rollup --config --watch",
}

在任意已经启动的React前端项目中:

import TextComponent from '${绝对路径}/dist/bundle.min.js'

使用ts

yarn add -D typescript @rollup/plugin-typescript tslib

之后配置tsconfig.json, 我是用的vscode自动config配置, 如下:

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "ES2020",
    "jsx": "react",
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "sourceMap": true
  },
  "exclude": [
    "node_modules",
    "**/node_modules/*"
  ]
}