如何将资源文件包含在 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

注意：此答案适用于 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"]
}

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

注意安全！

Answer 3

处理这个问题的最佳方法是控制代码。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

{

    ...

    "source": "src/index.html",

    "scripts": {

        "clean-dist": "rm -rf dist && mkdir dist",

        "copy-img": "cp -vR ./src/img ./dist",

        "copy-data": "cp -r src/data.json dist",

        "copy-assets": "cp -r src/assets/* dist",

        "copy-files": "npm run copy-img & npm run copy-assets & npm run copy-data",

        "init": "npm run clean-dist && npm run copy-files",

        "start": "npm run init && parcel",

        "build": "npm run init && parcel build"

    },

    ...

}

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