我有一个动态加载的资源文件文件夹,希望将其包含在宗地输出目录中。如何使用parcel build命令包含未引用的静态资源文件,如.json, .jpeg, .txt, .etc?
parcel build
.json, .jpeg, .txt, .etc
vqlkdk9b1#
Parcel v2有一个不同的插件:https://github.com/elwin013/parcel-reporter-static-files-copy
yarn add parcel-reporter-static-files-copy --dev
然后你需要创建.parcelrc或添加以下内容。(注意:"..."是文字,不需要填写):
.parcelrc
"..."
{ "extends": ["@parcel/config-default"], "reporters": ["...", "parcel-reporter-static-files-copy"] }
现在,当您进行常规宗地构建时,名为static的目录中的任何文件(和子目录)将自动复制到网站(通常是您的dist文件夹)。
static
dist
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中添加:
package.json
"staticFiles": { "staticPath": ["path/to/a/staticFolder"] }
它应该将您的文件复制到公用文件夹。注意安全!
aemubtdh3#
解决这个问题的最好方法是控制代码。npm已经提供了此工作所需的工具。在package.json中,当使用&&运行命令时,第一个命令将运行,如果它没有任何错误地完成,第二个命令也将执行。但是,运行&将在后台独立运行每个命令,而不管其他命令发生了什么。换句话说:
npm
&&
&
例如:
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。最后,包裹将被执行。
clean-dist
copy-files
src/img -> dist/img
src/assets/* -> dist/*
src/data.json -> dist/data.json
kupeojn64#
您可以编辑package.json脚本,以便在执行构建后复制文件。下面是我如何将.htaccess文件放到dist文件夹的:
"build": "rm -rf dist && parcel build src/index.html -d dist --public-url ./ '.' cp src/.htaccess dist"
dsf9zpds5#
{ ... "scripts": { "start": "npm run build-img && parcel", "build-img": "parcel build assets/* --no-cache" } }
5条答案
按热度按时间vqlkdk9b1#
Parcel v2有一个不同的插件:https://github.com/elwin013/parcel-reporter-static-files-copy
然后你需要创建
.parcelrc
或添加以下内容。(注意:"..."
是文字,不需要填写):现在,当您进行常规宗地构建时,名为
static
的目录中的任何文件(和子目录)将自动复制到网站(通常是您的dist
文件夹)。1bqhqjot2#
注意:此答案适用于Parcel v1
这里有一个parcel plugin:
https://www.npmjs.com/package/parcel-plugin-static-files-copy
安装它:
或者
然后,在
package.json
中添加:它应该将您的文件复制到公用文件夹。
注意安全!
aemubtdh3#
解决这个问题的最好方法是控制代码。
npm
已经提供了此工作所需的工具。在package.json
中,当使用&&
运行命令时,第一个命令将运行,如果它没有任何错误地完成,第二个命令也将执行。但是,运行&
将在后台独立运行每个命令,而不管其他命令发生了什么。换句话说:&&
进行顺序执行。&
进行并行执行。例如:
如果您有这样的项目结构,请将一些脚本添加到
package.json
此配置将依次运行
clean-dist
和copy-files
。前者将删除dist
目录并重新创建该目录。然后copy-files
将并行复制src/img -> dist/img
、src/assets/* -> dist/*
和src/data.json -> dist/data.json
。最后,包裹将被执行。kupeojn64#
您可以编辑package.json脚本,以便在执行构建后复制文件。下面是我如何将.htaccess文件放到
dist
文件夹的:dsf9zpds5#
package.json