使用 Rollup 捆绑我的库时如何解析 .jsx 文件？

Question

我正在使用故事书和汇总构建一个组件库。这是我的

rollup.config.mjs

/* eslint-disable import/no-extraneous-dependencies */
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
import { babel } from '@rollup/plugin-babel';

// This is required to read package.json file when
// using Native ES modules in Node.js
// https://rollupjs.org/command-line-interface/#importing-package-json
import { createRequire } from 'node:module';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const requireFile = createRequire(import.meta.url);
const packageJson = requireFile('./package.json');


export default [{
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript(),
    postcss({
      extensions: ['.css']
    })
  ]
}, {
  input: 'src/index.ts',
  output: [{ file: 'lib/index.d.ts', format: 'es' }],
  plugins: [dts()],
  external: [/\.css$/]
}];

在捆绑

.ts

、

.tsx

和

.js

时效果很好，但在解析

.jsx

文件时失败。我遇到这样的错误

[!] RollupError: Could not resolve "./Checkbox" from "src/components/Checkbox/index.js"
src/components/Checkbox/index.js

我通过将

Checkbox

文件夹中的index.js 更改为

.jsx

进行确认，然后收到此错误

src/index.ts → lib/index.js, lib/index.esm.js...
[!] RollupError: Could not resolve "./components/Checkbox" from "src/index.ts"
src/index.ts

我查了一下并尝试使用 babel 插件进行汇总，这些是我通过的配置

    babel({
      babelHelpers: 'bundled',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      exclude: 'node_modules/**',
    })

但仍然没有运气。任何帮助将不胜感激，或者我的配置可能是错误的。

这是我的 babel 配置顺便说一下

module.exports = (api) => {
  const isTest = api.env('test');
  api.cache(true);
  const plugins = [
    ['babel-plugin-styled-components', { ssr: !isTest, displayName: !isTest }],
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-optional-chaining'
  ];
  return {
    presets: ['@babel/preset-env', '@babel/react', '@babel/preset-typescript'],
    plugins
  };
};

这是我的 tsconfig 如果有帮助的话

{
  "compilerOptions": {
    "baseUrl": ".",
    "rootDirs": [
      "src",
      "stories"
    ],
    "paths": {
      "components/*": ["src/components/*"],
      "libs/*": ["src/libs/*"],
      "fonts/*": ["src/fonts/*"],
      "styles/*": ["src/styles/*"],
      "utils/*": ["src/utils/*"],
      "constants/*": ["src/constants/*"],
    },
    "sourceMap": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "target": "es5",
    "outDir": "lib",
    "downlevelIteration": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "declaration": true,
    "declarationDir": "lib",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src/**/*", "index.d.ts"],
  "exclude": [
    "node_modules",
    "stories",
    "./lib/**/*",
    ".storybook",
    "webpack",
    "jest",
    "src/babel.config.js",
    "src/babel.config.pack.js",
    "src/common.babel.js",
    "src/setupTests.js",
    "**/*/*.test.ts",
  ]
}

Answer 1

只是通过指定

resolve

插件中的扩展来修复它

    resolve({
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    })

我的新汇总配置如下所示

/* eslint-disable import/no-extraneous-dependencies */
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
import { babel } from '@rollup/plugin-babel';

// This is required to read package.json file when
// using Native ES modules in Node.js
// https://rollupjs.org/command-line-interface/#importing-package-json
import { createRequire } from 'node:module';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const requireFile = createRequire(import.meta.url);
const packageJson = requireFile('./package.json');


export default [{
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve({
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    }),
    commonjs(),
    typescript(),
    postcss({
      extensions: ['.css']
    }),
    babel({
      babelHelpers: 'bundled',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      exclude: 'node_modules/**',
    })
  ]
}, {
  input: 'src/index.ts',
  output: [{ file: 'lib/index.d.ts', format: 'es' }],
  plugins: [dts()],
  external: [/\.css$/]
}];

不知道为什么 babel 解析不起作用。