创建react源码项目-rollup实现jsx打包

安装

pnpm i rollup -D -w

打包文件配置

• 打包命令

"build:dev": "rimraf dist && rollup --bundleConfigAsCjs --config scripts/rollup/react.config.js"

• 打包相关插件

  • rollup-plugin-generate-package-json打包文件中自动生成package.json文件
  • rollup-plugin-typescript2打包时编译ts代码
  • @rollup/plugin-commonjsCommonJS 模块转换为 ES 模块
  • rimraf删除文件夹

• utils公共方法

import path from 'path';
import fs from 'fs';
import ts from 'rollup-plugin-typescript2';
import cjs from '@rollup/plugin-commonjs';

const pkgPath = path.resolve(__dirname, '../../packages'); // 打包文件入口
const distPath = path.resolve(__dirname, '../../dist/node_modules'); // 打包之后目标地址

export const resolvePkgPath = (pkgName, isDist) => {
	if (isDist) {
            return `${distPath}/${pkgName}`;
	}

	return `${pkgPath}/${pkgName}`;
};

// 读取对应包package.json中的json
export const getPackageJson = (pkgName) => {
	const path = `${resolvePkgPath(pkgName)}/package.json`;

	const str = fs.readFileSync(path, 'utf8');

	return JSON.parse(str);
};

/**
 * 基础的打包插件
 * @param {*} param0
 * @returns
 * // cjs 符合umd
 * // ts 打包转化ts
 */
export const getBaseRollupPlugins = ({ typescript } = {}) => {
	return [cjs(), ts(typescript)];
};

• 配置react.config.js文件

import generatePackageJson from 'rollup-plugin-generate-package-json';
import { resolvePkgPath, getPackageJson, getBaseRollupPlugins } from './utils';
const { name, module } = getPackageJson('react'); // package.json 中name

const pkgPath = resolvePkgPath(name);
const pkgDistPath = resolvePkgPath(name, true);

export default [
	// react
	{
		input: `${pkgPath}/${module}`,
		output: {
			file: `${pkgDistPath}/index.js`,
			name: 'index.js',
			format: 'umd',
		},
		plugins: [
			...getBaseRollupPlugins(),
			generatePackageJson({
				inputFolder: pkgPath,
				outputFolder: pkgDistPath,
				baseContents: ({ name, description, version }) => ({
					name,
					description,
					version,
					main: 'index.js',
				}),
			}),
		],
	},
	// jsx-runtime
	{
		input: `${pkgPath}/src/jsx.ts`,
		output: {
			file: `${pkgDistPath}/jsx-runtime.js`,
			name: 'jsx-runtime.js',
			format: 'umd',
		},
		plugins: getBaseRollupPlugins(),
	},
	// jsx-dev-runtime
	{
		input: `${pkgPath}/src/jsx.ts`,
		output: {
			file: `${pkgDistPath}/jsx-dev-runtime.js`,
			name: 'jsx-dev-runtime.js',
			format: 'umd',
		},
		plugins: getBaseRollupPlugins(),
	},
];

代码地址

github.com/wangyanduod…