在esbuild编译输出中包含完整的文件路径

Question

我想把这个文件作为浏览器中的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写这样的导入?

Answer 1

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

的例子:

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

当生成一个bundle时，你可以使用——outfile参数来定义bundle文件名，而不是——outdir。你可能还想用——minify参数为浏览器缩小bundle，用——target指定你想要支持的浏览器的目标环境，你可能想用——sourcemap添加源地图支持。

构建命令变成:

npx esbuild src/app.tsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16 --outfile=esbuilt/app.js --format=esm