如何将资源文件包含在 Parcel js 中？

Question

我有一个动态加载的资源文件的文件夹，我想将其包含在我的包输出目录中。如何像.json, .jpeg, .txt, .etc我的parcel build命令一样包含未引用的静态资源文件？

Answer 1

对于 Parcel v2，有一个不同的插件：https ://github.com/elwin013/parcel-reporter-static-files-copy

yarn add parcel-reporter-static-files-copy --dev

那么您需要创建.parcelrc或添加以下内容。（注："..."是字面意思，不需要填写）：

{
  "extends": ["@parcel/config-default"],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

现在，当您进行常规包构建时，名为 的目录中的任何文件（和子目录）static都将自动复制到网站（通常是您的文件夹）。dist

Answer 2

处理这个问题的最佳方法是控制代码。npm已经提供了这项工作所需的工具。在 中package.json，当使用 运行命令时&&，将运行第一个命令，如果它确实完成且没有任何错误，则也将执行第二个命令。但是，运行&将在后台独立运行每个命令，无论其他命令发生什么情况。换句话说：

• 用于&&顺序执行。
• 用于&并行执行。

例如：

project/
|dist/
    |...
|src/
    |assets/
        |text.txt
        |memos.txt
        |info.ini
    |css/
        |style.css
    |img/
        |a.png
        |b.jpg
        |c.jpeg
    |data.json
    |not-to-copy.json
    |not-to-copy.conf
    |index.js
    |index.html
|package.json

如果您有这样的项目结构，请添加一些脚本package.json

project/
|dist/
    |...
|src/
    |assets/
        |text.txt
        |memos.txt
        |info.ini
    |css/
        |style.css
    |img/
        |a.png
        |b.jpg
        |c.jpeg
    |data.json
    |not-to-copy.json
    |not-to-copy.conf
    |index.js
    |index.html
|package.json

此配置将依次运行clean-dist和copy-files。前者会删除该dist目录并重新创建该目录。然后copy-files将并行复制src/img -> dist/img,src/assets/* -> dist/*和。src/data.json -> dist/data.json最后，包裹将被执行。

Answer 3

注意：此答案适用于 Parcel v1

有一个包裹插件可以做到这一点：

https://www.npmjs.com/package/parcel-plugin-static-files-copy

安装它：

yarn add parcel-plugin-static-files-copy --dev

或者

npm install -D parcel-plugin-static-files-copy

然后，在 中package.json添加：

"staticFiles": {
   "staticPath": ["path/to/a/staticFolder"]
}

它应该将您的文件复制到公用文件夹。

注意安全！