javascript 如何在parcel js中包含资产文件?

wwwo4jvm  于 2023-06-28  发布在  Java
关注(0)|答案(5)|浏览(152)

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

vqlkdk9b

vqlkdk9b1#

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

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

然后你需要创建.parcelrc或添加以下内容。(注意:"..."是文字,不需要填写):

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

现在,当您进行常规宗地构建时,名为static的目录中的任何文件(和子目录)将自动复制到网站(通常是您的dist文件夹)。

1bqhqjot

1bqhqjot2#

注意:此答案适用于Parcel v1
这里有一个parcel plugin:
https://www.npmjs.com/package/parcel-plugin-static-files-copy
安装它:

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

或者

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

然后,在package.json中添加:

  1. "staticFiles": {
  2. "staticPath": ["path/to/a/staticFolder"]
  3. }

它应该将您的文件复制到公用文件夹。
注意安全!

展开查看全部
aemubtdh

aemubtdh3#

解决这个问题的最好方法是控制代码。npm已经提供了此工作所需的工具。在package.json中,当使用&&运行命令时,第一个命令将运行,如果它没有任何错误地完成,第二个命令也将执行。但是,运行&将在后台独立运行每个命令,而不管其他命令发生了什么。换句话说:

  • 使用&&进行顺序执行。
  • 使用&进行并行执行。

例如:

  1. project/
  2. |dist/
  3. |...
  4. |src/
  5. |assets/
  6. |text.txt
  7. |memos.txt
  8. |info.ini
  9. |css/
  10. |style.css
  11. |img/
  12. |a.png
  13. |b.jpg
  14. |c.jpeg
  15. |data.json
  16. |not-to-copy.json
  17. |not-to-copy.conf
  18. |index.js
  19. |index.html
  20. |package.json

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

  1. {
  2. ...
  3. "source": "src/index.html",
  4. "scripts": {
  5. "clean-dist": "rm -rf dist && mkdir dist",
  6. "copy-img": "cp -vR ./src/img ./dist",
  7. "copy-data": "cp -r src/data.json dist",
  8. "copy-assets": "cp -r src/assets/* dist",
  9. "copy-files": "npm run copy-img & npm run copy-assets & npm run copy-data",
  10. "init": "npm run clean-dist && npm run copy-files",
  11. "start": "npm run init && parcel",
  12. "build": "npm run init && parcel build"
  13. },
  14. ...
  15. }

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

展开查看全部
kupeojn6

kupeojn64#

您可以编辑package.json脚本,以便在执行构建后复制文件。下面是我如何将.htaccess文件放到dist文件夹的:

  1. "build": "rm -rf dist && parcel build src/index.html -d dist --public-url ./ '.' cp src/.htaccess dist"
dsf9zpds

dsf9zpds5#

package.json

  1. {
  2. ...
  3. "scripts": {
  4. "start": "npm run build-img && parcel",
  5. "build-img": "parcel build assets/* --no-cache"
  6. }
  7. }

相关问题