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

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

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

vqlkdk9b

vqlkdk9b1#

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文件夹)。

1bqhqjot

1bqhqjot2#

注意:此答案适用于Parcel v1
这里有一个parcel plugin:
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"]
}

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

aemubtdh

aemubtdh3#

解决这个问题的最好方法是控制代码。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-distcopy-files。前者将删除dist目录并重新创建该目录。然后copy-files将并行复制src/img -> dist/imgsrc/assets/* -> dist/*src/data.json -> dist/data.json。最后,包裹将被执行。

kupeojn6

kupeojn64#

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

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

dsf9zpds5#

package.json

{
  ...
  "scripts": {
    "start": "npm run build-img && parcel",
    "build-img": "parcel build assets/* --no-cache"
  }
}

相关问题