0

我想在我的浏览器中将此文件作为 es 模块。HelloApp.tsx

import React from "react";
import { render } from "react-dom";

function HelloApp(props: any): React.ReactElement {
  return <div>Greetings</div>
}

render(
  <HelloApp />,
  document.getElementById("app")
);

我在跑npx esbuild ./**/*.tsx --outdir=esbuilt --format=esm

输出：

import React from "react";
import {render} from "react-dom";
function HelloApp(props) {
  return /* @__PURE__ */ React.createElement("div", null, "I'm a component");
}
render(/* @__PURE__ */ React.createElement(HelloApp, null), document.getElementById("app"));

浏览器无法使用这些导入。理想情况下，路径将类似于import React from "/scripts/react.js"

你如何告诉 esbuild 编写这样的导入？

4

1 回答 1

0

导入无法解析，因为它们不包含在捆绑包中。如果您添加 --bundle 参数，这应该可以工作。此外，您应该使用特定文件作为包的入口点，而不是传递 glob 模式。

例子：

npx esbuild src/app.tsx --bundle --outdir=esbuilt --format=esm

生成包时，您可以使用 --outfile 参数代替 --outdir 来定义包文件名。您可能还想使用 --minify 参数为浏览器缩小捆绑包，使用 --target 指定要支持的浏览器的目标环境，并且您可能希望使用 --sourcemap 添加源映射支持。

构建命令变为：

npx esbuild src/app.tsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=esbuilt/app.js --format=esm
于 2021-08-31T10:34:41.610 回答