使用 Rollup 和 babel 捆绑远程 React 项目

Question

我正在尝试获取一个远程 React 项目（使用打字稿）并将其与 Rollup 捆绑在一起。这是我到目前为止的设置：

1. 获取远程React项目并将其存储在临时文件夹中
2. 使用 Rollup 的 Javascript API，将项目与这些输入/输出选项捆绑在一起：

const inputOptions: RollupOptions = {
  input: "FOLDER_PATH/App.tsx",
  output: {
    file: "bundle.jsx",
  },
  external: ["react", "react-dom"],
  plugins: [
    typescript({ tsconfig: "../tsconfig.json" }),
    commonjs(),
    resolve(),
    babel({ presets: ["@babel/preset-react"] }),
  ],
};

const outputOptionsList: OutputOptions[] = [
  {
    file: "./dist/bundle.jsx",
    format: "cjs",
  },
];

此捆绑过程当前失败并出现以下错误：

Error [RollupError]: Unexpected token (Note that you need plugins to import files that are not JavaScript)

我正在测试的 React 应用程序是一个非常简单的应用程序，其中一个组件如下所示：

import React from "react";

const App = ({ name }: { name: string }) => {
  return (
    <div>
      <p>Hello {name}</p>
    </div>
  );
};
export default App;

希望得到一些帮助。

Answer 1

尝试执行 ReactDom.render 的文件... 作为汇总的输入。 而且你的bundle将永远是一个js文件。

input: "FOLDER_PATH/main.ts",
  output: {
    file: "bundle.js",
  },