如何在不捆绑包裹的情况下提供带有包裹的json文件？

Question

我正在用包裹和打字稿制作一个项目。它工作得很好，但是对于我正在使用的一个库，我需要在固定目录中托管一堆 .json 文件：

文件如下所示：

index.html
index.ts
tiles/
 | file.json
 | file0.json
 | subdirectory with *.json

在 中package.json，我将它们包含为parcel *.html tiles/*(for start) 和parcel build index.html tiles/*，但这会导致 json 文件被构建到一些 .js 文件中。但是，我需要按原样提供它们。

关于如何告诉包裹不要捆绑它们的任何提示？

Answer 1

您可以覆盖文件中用于 JSON 文件的转换器插件.parcelrc。它默认使用@parcel/transformer-json，但您可以使用@parcel/transformer-raw将 JSON 文件视为资产。

.parcelrc

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.json": ["@parcel/transformer-raw"]
  }
}

Answer 2

有一个 npm-package 正是这样做的：https : //www.npmjs.com/package/parcel-plugin-static-files-copy

npm install -D parcel-plugin-static-files-copy 安装（仅用于开发）

然后，在 中package.json，添加：

"staticFiles": {
    "staticPath": [
      {
        "staticPath": "tiles", -- copy all files from this directory at the root from your project...
        "staticOutDir": "tiles/" -- ... to this directory in dist/, so it becomes dist/tiles/<files>
      }
    ]
  }

``` 

Note that you have to define a `staticPath` in the list `staticPath`, this is a bit confusing at first.

Answer 3

如果您使用的是 Parcel 2，您可以执行以下操作：

import jsonUrl from 'url:./data.json'

// Fetch the file asynchronously from the URL
fetch(jsonUrl)
  .then(response => response.json())
  .then(json => ...)
  ... etc. ...