问题标签 [esbuild]

我有一个 SSR 宠物项目，最近我从 webpack 切换到 esbuild。但是在捆绑我的应用程序之后，我从服务器部分获得了另一个 .css 文件。我可以阻止 esbuild 这样做吗？

包.json

esbuild.config.js

捆绑的结果

背景

我想在任意目录下启动vite服务来支持预览。还有test file：

• 测试文件将由testFilePlugin
• testFilePlugin包含一些依赖于 commonJS 模块的代码：import { Fragment } from 'react/jsx-runtime'
• 已react安装在我的项目中

失败 1

然后，我这样导入其他项目模块：</p>

然后，我只是main.js在其他目录中执行。但出现错误：

[vite] Internal server error: Failed to resolve import "react/jsx-runtime" from "xx.test". Does the file exist?

我确认它react已安装在我的项目目录中。所以这个错误可能是因为vite正在根据其他目录的node_modules寻找模块。</p>

所以我想到了使用@rollup/plugin-node-resolve手动添加moduleDirectories：

失败 2

重试后不再出现编译错误！但是浏览器出现运行时错误：</p>

Uncaught SyntaxError: The requested module '/@fs/.../myProject/node_modules/react/jsx-runtime' does not provide an export named 'Fragment

所以我想我应该使用@rollup/plugin-commonjs插件来解决这个问题：</p>

失败 3

这次终于没有运行时错误了！但是页面总是在加载。

查看网络请求，我发现了 4 个待处理请求：

• http://localhost:3000/@id/__x00__/.../myProject/node_modules/react/cjs/react-jsx-runtime.production.min.js?commonjs-proxy
• http://localhost:3000/@id/__x00__/.../myProject/node_modules/react/cjs/react-jsx-runtime.development.js?commonjs-proxy
• http://localhost:3000/@id/__x00__/.../myProject/node_modules/react/cjs/react-jsx-runtime.development.js?commonjs-proxy
• http://localhost:3000/@id/__x00__/.../myProject/node_modules/object-assign/index.js?v=a502bc89?commonjs-proxy
• http://localhost:3000/@id/__x00__/.../myProject/node_modules/.vite/react.js?v=a502bc89&es-interop?commonjs-proxy

在上述尝试失败后，我决定放弃Vite插件来解决这个问题！</p>

然后，分享一下我尝试过的一些成功的解决方案：</p>

成功1

还要在目标目录中安装 react。

成功 2

手动添加react/jsx-runtime到 vite 的pre-bundling 中：

成功 3

然后通过我项目中的测试文件导入其他目录中的测试文件：

结尾

1. 我想知道这个要求是否有更好的解决方案？
2. 失败的原因是Failed x什么？

我正在尝试在混音应用程序中使用FAST Web 组件，但到目前为止还没有运气。

在这一点上，我的猜测是问题出在 remix 中完成的构建。我知道构建是由esbuild完成的，并且它不能完全与 esm 模块一起使用，至少不是 FAST 导出它们的方式。

我得到的错误是：

以下是我尝试在我的混音应用程序中包含 FAST 的方式：

现场演示：https ://codesandbox.io/s/green-leftpad-grd8o?file=/app/routes/index.tsx:0-702

使用捆绑器的插件来执行某些工作意味着什么，我的意思是我还没有使用捆绑器的经验，我想通过使用 esbuild 和 tailwindcss 以及 react、typescript 和所有内容创建一个“专业”工作流来了解这一点好东西，我被困在将顺风 css 连接到 eslint 和其他东西上。我知道要运行tailwind css，使它工作的必要库是postcss，我遵循了tailwind css docs，它说

它没有说明 postcss，所以我认为 esbuild 应该对此负责，我认为必须通过插件完成，有两个：

https://github.com/karolis-sh/esbuild-postcss npm i postcss esbuild-postcss -D

和

https://github.com/martonlederer/esbuild-plugin-postcss2 npm i -D esbuild-plugin-postcss2

第一个的安装过程包括 postcss 而第二个没有，但是第二个似乎更新并且有点“在”第一个之上。问题是它们都不起作用......这是我的 esbuild 配置：

这是我的 package.json 文件：

作为开发服务器，我使用包 esbuild serve。当我运行 css 命令时，我得到了一种输出，但是它更像是整个顺风的 css 重置，当我运行 npm run build 作为输出时，我得到了复制的指令

我的 VScode 也在抱怨我不知道如何处理它们的警告。你能解释一下我应该如何理解这个例子中捆绑和使用插件的整个过程吗？我错过了什么？非常感谢

我有一个使用 esbuild 作为 JS 捆绑器并导入了引导程序的 Rails 7 应用程序。

我试图弄清楚如何在主 application.js 文件“外部”访问任何 Bootstrap Javascript 功能 - 即假设我想以编程方式在特定页面上显示 Bootstrap 模式，如下所示：

但是这不起作用，因为“引导程序”未知：

...即使 application.js 中的页面链接：

关于如何在 application.js 本身之外的 JS 中访问“引导程序”的任何建议？

谢谢 ！

我在 package.json 中的构建脚本是：

所以我在资产、构建、我的 application.js 和我的 application.js.map 下看到

但是开发人员控制台在源地图上显示 404，并且服务器日志将该资源显示为错误。我究竟做错了什么？

我正在为我的 React 项目的构建管道使用带有 ESbuild-loader 的 Webpack5。为了将我的组件连接到 Redux 商店，我使用@connect装饰器而不是使用 HOC 方法。

例子：MyComponent.jsx

这是我的js/jsx文件的 Webpack 配置规则：

当我尝试启动我的开发服务器时，我得到这个与 line 装饰器相关的错误被定义：

ESbuild 不懂装饰器吗？

我正在尝试构建一个在线反应代码编辑器，我必须从摩纳哥代码编辑器转换代码。我的文件存储在本地存储中，例如，->

组件 Modal 存储在本地存储中。在编译代码时，如何让构建知道在 localStorage 中搜索这种类型的导入？

我正在构建一个Obsidian 插件，它使用esbuild将 ts 文件捆绑到 js 文件。ts 文件位于D:\foo1\foo2\...，我希望 js 文件位于D:\bar1\bar2\.... 这样做的原因是因为我希望源文件夹与插件文件夹位于不同的文件夹中，因此在将其同步到移动设备时我不必排除源文件。

有人建议我编辑 esbuild.config.mjs 文件，我在文档中发现在outfile配置旁边还有outdir、outbase。但是，这些是我使用它们时的结果：

异常目录

错误：无法创建输出目录：mkdir D:\GitHub\Obsidian\dotmaker\D:Quả CầuB Nội dungKnowledge graphsCây vấn đề.obsidianpluginsdotmaker：目录名称无效。

外基地

它在终端打印 js 内容，但真实文件没有改变。

看来我只能在源文件夹中创建js文件。那可能吗？

我正在处理一个网页，其中包含不提供 esm 导出的 js 文件，并且它们定义了其他文件所依赖的全局变量。像这样的东西：

该网页不使用任何 UI 框架。

我正在尝试缩小这些 js 文件，但可以理解的是，缩小器会更改全局变量的名称，而不会更新依赖于它们的其他文件，因此这些其他文件在遇到未定义的变量时会引发错误。有没有办法让压缩器意识到这一点，可能通过在某些/所有文件中指定要忽略的变量？类似于 eslint 允许您指定不应标记为未定义的全局变量。我知道这可能很困难，因为文件不像模块那样具有明确的依赖树关系。如果他们能很好地处理这种情况，我正在使用esbuild但对其他构建工具开放。谢谢。