简体   繁体   English

Angular 配置或编译 JSON 资产

[英]Angular configure or compile JSON asset

Is it possible in Angular or via help of a custom-webpack plugin to transform a JSON asset before copying it to the assets folder.是否有可能在 Angular 中或通过custom-webpack插件的帮助在将 JSON 资产复制到资产文件夹之前对其进行转换。 I have a JSON file in which I would like to transform some values before placing it into the assets folder.我有一个 JSON 文件,我想在将其放入资产文件夹之前转换一些值。 I have tried to use the CopyWebpackPlugin but it seems that it is not applicable to assets.我曾尝试使用CopyWebpackPlugin ,但它似乎不适用于资产。

What I want to do is take a JSON from the src , replace some values in that JSON during compilation and then put it into the target location under dist/<...>/assets .我想要做的是从src中获取 JSON ,在编译期间替换该 JSON 中的一些值,然后将其放入dist/<...>/assets下的目标位置。

This problem can actually be solved by using the copy-webpack-plugin .这个问题实际上可以通过使用copy-webpack-plugin来解决。 The caveat is that the Angular compiler will copy assets after the copy-webpack-plugin has run.需要注意的是 Angular 编译器将在copy-webpack-plugin运行后复制资产。 The problem I was observing was that the file copied by the copy-webpack-plugin was overwritten by the original asset file.我观察到的问题是copy-webpack-plugin的文件被原始资产文件覆盖了。 To ensure that the original asset template file will not overwrite the file that was copied and transformed by the copy-webpack-plugin the following steps are necessary:为确保原始资产模板文件不会覆盖由copy-webpack-plugin复制和转换的文件,需要执行以下步骤:

  1. Use the asset configuration in angular.json to exclude the source file from the assets using the expanded asset form (optionally rename the source file to something like foo.tpl.json first):使用angular.json中的 资产配置,使用扩展资产形式从资产中排除源文件(可选择首先将源文件重命名为类似foo.tpl.json的名称):

     { "glob": "**/*", "input": "./assets", "output": "dist/assets", "ignore": [ "**/foo.json" ] }
  2. Copy and transform the file via copy-webpack-plugin , this can be achieved using the custom-webpack plugin by adding the copy-webpack-plugin as additional plugin to the webpack configuration.通过copy-webpack-plugin复制和转换文件,这可以使用custom-webpack插件通过将copy-webpack-plugin作为附加插件添加到 webpack 配置来实现。

Use it用它

https://www.npmjs.com/package/json-server https://www.npmjs.com/package/json-server

download link and doc link are the same下载链接和文档链接是一样的

[BTW, if you need very complex query - just use Golang with PostgreSQL . [顺便说一句,如果您需要非常复杂的查询 - 只需将GolangPostgreSQL一起使用。 No limitation there (but you have to use postgreSQL database instead of.json file then) ]那里没有限制(但是你必须使用 postgreSQL 数据库而不是 .json 文件)]

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM