第一次使用Rollup创建库,有一个基本的按钮组件,运行时遇到这个错误
rollup - c
src/index.ts → dist/esm/index.js... [!] RollupError:“default”不是由“node_modules/react/index.js”导出,而是由“src/components/Button/Button.tsx”导入。 https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module src/components/Button/Button.tsx (1:7) 1:从“react”导入React; ^ 2: const Button = (props) => {
按照故障排除链接中的说明进行操作,安装了
@rollup/plugin-commonjs
但仍然出现此错误。
package.json
{
"name": "button-library",
"version": "1.0.0",
"description": "",
"scripts": {
"rollup": "rollup -c"
},
"author": "Leon Gaban",
"license": "ISC",
"dependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^25.0.4",
"@rollup/plugin-node-resolve": "^15.2.1",
"@rollup/plugin-typescript": "^11.1.3",
"@types/react": "^18.2.22",
"jest-environment-jsdom": "^29.7.0",
"rollup": "^3.29.2",
"rollup-plugin-dts": "^6.0.2",
"rollup-plugin-postcss": "^4.0.2",
"tslib": "^2.6.2",
"typescript": "^5.2.2"
},
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"files": [
"dist"
],
"types": "dist/index/.d.ts"
}
汇总配置
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
import packageJson from "./package.json" assert { type: "json" };
export default [
{
input: "src/index.ts",
output: [
{
dir: "output",
format: "cjs",
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
typescript({ tsconfig: "./tsconfig.json" }),
postcss(),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [
{
file: "build/scripts.js",
format: "esm",
sourcemap: true,
globals: ["react"],
},
{
file: "dist/index.d.ts",
format: "esm",
},
],
plugins: [
commonjs({
include: "./node_modules/**",
}),
dts(),
],
external: [/\.(css|less|scss)$/],
},
];
按钮组件
import React from "react";
interface ButtonProps {
label: string;
}
const Button = (props: ButtonProps) => {
return <button>{props.label}</button>;
};
export default Button;
这是有效的配置,还需要更新 tsconfig 并添加 bablerc
import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import typescript from '@rollup/plugin-typescript';
export default {
input: 'src/index.ts',
output: [
{
file: 'dist/index.js',
format: 'cjs',
sourcemap: true
},
{
file: 'dist/index.esm.js',
format: 'esm',
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
postcss({
inject: true
}),
typescript(),
babel({
extensions: ['.js', '.jsx', '.ts', '.tsx'],
exclude: 'node_modules/**'
}),
resolve(),
commonjs()
],
};
tsconfig
{
"compilerOptions": {
"outDir": "./dist",
"module": "es6",
"target": "es5",
"lib": [
"es6",
"dom"
],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"moduleResolution": "node",
"rootDirs": [
"src"
],
"baseUrl": ".",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"declaration": true
},
"include": [
"src/**/*"
]
}
bablerc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}
套餐
"devDependencies": {
"@babel/core": "^7.22.20",
"@babel/preset-env": "^7.22.20",
"@babel/preset-react": "^7.22.15",
"@babel/preset-typescript": "^7.22.15",
"@rollup/plugin-commonjs": "^25.0.4",
"@rollup/plugin-node-resolve": "^15.2.1",
"@rollup/plugin-typescript": "^11.1.3",
"@types/react": "^18.2.22",
"rollup": "^2.79.1",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"tslib": "^2.6.2",
"typescript": "*"
},