使用 Parcel JS 2 构建时为空 Javascript 文件

Question

在我的 package.json:

"dev": "parcel parcel/index.scss parcel/index.js --dist-dir assets --no-source-maps",
"build": "parcel build parcel/index.scss parcel/index.js --dist-dir assets --no-source-maps"

dev 有效。我得到了预期的结果，这是我的两个索引文件被放入我的资产文件夹的根目录中，并且都填充了代码。我可以看到我的 Sass 和 JS 来自单独的文件。

build也会输出两个索引文件，但是js文件是空的。 css 文件已填充。

没有错误。构建完成。

所有其他设置均为默认设置。

我在 Win10 笔记本电脑上运行最新的节点和 npm。

有什么想法吗？

Answer 1

这是正在发生的事情的简化版本：

您的 parcel/index.js 文件包含如下行：

import './scripts/global/global';
...

并且 ./scripts/global/global 文件包含如下所示的项目：

function globalTest1() {
  console.log('testing from global.js function 1');
}
...

看起来您正在尝试构建一个在全局命名空间中公开一堆函数的包。

这里没有发生这种情况，因为默认情况下，parcel 将尝试构建一个现代的基于 ESModule 的包（例如，可以使用 <script type="module>" 导入到 <html> 文件中的东西）。默认情况下，在这些类型的脚本中声明的变量不是全局命名空间的一部分（请参阅 mozilla docs). Furthermore, in production mode (e.g. when you run parcel build) parcel tries to be smart to remove things that it can tell are not used within the bundle (see parcel scope-hosting docs）。由于您没有使用任何的导入，它们都会被删除。

包裹 v1 曾经使用 --global 标志支持这种情况，但尚未转移到 v2。有个near-term roadmap item to support this scenario through a "UMD output format" - it's not fully implemented yet, but when it is, you should be able to define some global variable that will contain all the top-level exports from your bundle (see PR #7240, PR #7381, and Issue #7312).

与此同时，您应该能够通过将要成为全局命名空间的内容显式分配给入口脚本中的 globalThis 变量来解决这种情况。 Parcel 将看到这些项目已被使用——因此不会对它们进行 tree-shaking。不幸的是，这个过程会涉及一些手动样板，但你现在应该解除封锁。例如，您可以更改 parcel/index.js 文件以在名为 myGlobalFunctions:

的全局变量中公开来自 global.js 文件的所有导出

import * as myGlobalFunctions from './scripts/global/global';
globalThis.myGlobalFunctions = myGlobalFunctions;
.....

（您可以根据自己的情况为这些导出选择名称和结构）。

Answer 2

虽然你的问题似乎已经解决了，但我在使用 Parcel 2（空编译模块）构建 JS 库时遇到了类似的问题，我只是在这里记录一下。

package.json 中的条目修复了它："main": "dist/index.js"（指定编译模块的路径）

我的模块包含 export 个语句。

由此产生的一个麻烦是，当您运行包裹有不同的目标时，您需要更改或删除此条目。您也可以通过添加 "targets": {"main": false} 让 parcel 忽略它 (following the docs)，但是上面提到的针对 index.js 目标的 hack 也不起作用。

使用 Parcel JS 2 构建时为空 Javascript 文件

Empty Javascript File When Building With Parcel JS 2

javascript

parceljs