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

Question

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

Answer 1

对于 Parcel v2，有一个不同的插件：https ://github.com/elwin013/parcel-reporter-static-files-copyyarn 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最后，包裹将被执行。