Rollup遗漏JSX导入无法识别导入组件 生成空chunk问题求助

问题根因 #

你当前仅通过acorn-jsx让Rollup支持解析JSX语法，没有对JSX代码做编译转换。Rollup无法识别<Rollup />中引用的是你导入的组件变量，默认将其判定为全局变量，因此认为导入的Rollup组件未被使用，直接在Tree Shaking阶段将其剔除，最终出现空chunk、组件未引入的问题。

解决方案 #

你需要新增JSX编译插件，将JSX语法转换为Rollup可识别的标准JS代码，常用的方案有两种：

方案1：使用Babel编译（兼容性最好） #

1. 安装所需依赖

npm install @rollup/plugin-babel @babel/preset-react --save-dev

2. 修改rollup.config.js配置

import jsx from "acorn-jsx";
import babel from "@rollup/plugin-babel";

export default {
  acornInjectPlugins: [ jsx() ],
  input: "./entry.js", // 修正入口路径
  plugins: [
    babel({
      presets: ["@babel/preset-react"],
      babelHelpers: "bundled",
      extensions: [".jsx", ".js"]
    })
  ],
  output: {
    format: "es",
    chunkFileNames: "[name]",
    manualChunks: {
      "component.jsx": [ "./component.jsx" ], // 补全路径避免识别异常
      "page.jsx": [ "./page.jsx" ],
    },
  },
};

如果使用React 17+的新版JSX转换（无需手动导入React），可以修改babel预设配置为：

presets: [["@babel/preset-react", { runtime: "automatic" }]]

方案2：使用esbuild编译（构建速度最快） #

1. 安装所需依赖

npm install rollup-plugin-esbuild --save-dev

2. 修改rollup.config.js配置

import jsx from "acorn-jsx";
import esbuild from "rollup-plugin-esbuild";

export default {
  acornInjectPlugins: [ jsx() ],
  input: "./entry.js",
  plugins: [
    esbuild({
      jsx: true,
      loader: "jsx"
    })
  ],
  output: {
    format: "es",
    chunkFileNames: "[name]",
    manualChunks: {
      "component.jsx": [ "./component.jsx" ],
      "page.jsx": [ "./page.jsx" ],
    },
  },
};

修改后重新执行构建即可符合预期输出。

内容的提问来源于stack exchange，提问作者A.N.M. Saiful Islam