如何从项目目录中读取 javascript 中的属性文件？
Posted
技术标签:
【中文标题】如何从项目目录中读取 javascript 中的属性文件？【英文标题】：How to read a properties file in javascript from project directory? 【发布时间】：2013-10-19 02:37:38 【问题描述】：我正在构建一个 Chrome 打包应用程序。如果配置文件在资源目录中并且在启动时想要通过 javascript 读取，我想放置脚本配置。
例如
项目 网页内容 index.html manifest.json main.js 资源 config.properties这里我想让main.js在开头加载config.properties文件并获取键值对。
有人做过这样的事吗？
【问题讨论】：
【参考方案1】：将文件构建为 JSON。使用 File API 或 XHR 将其读入字符串。然后是 JSON.parse(string)。
Loading local content through XHR in a Chrome packaged app http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api【讨论】：
【参考方案2】：按照 sowbug 的回答，有一种超级简单的方法可以做到这一点，但不需要任何 XHR 或文件读取。
第 1 步。 像这样创建资源/config.js：
gOptions =
// This can have nested stuff, arrays, etc.
color: 'red',
size: 'big',
enabled: true,
count: 5
第 2 步。 将此文件包含在您的 index.html 中：
<!doctype html>
<head>
<script src="resource/config.js"></script>
...
第 3 步。 直接从您的 main.js（或任何地方）访问您的选项：
...
if (gOptions.enabled)
for (var i = 0; i < gOptions.count; i++)
console.log(gOptions.color);
...
【讨论】：
答案并不能解决问题。我还有一个在 3rd 方代码中使用的属性文件。我无法按照您的建议将其重写为 json。 我想是的。您可能不清楚"properties file" 是什么意思 问题是关于properties 文件而不是json。【参考方案3】：
您可以使用messageResource.js，这是我创建的一个用于加载属性文件的简单javascript库。
1) 在 index.html 中包含 messageResource.js。
<script src="messageResource.min.js"></script>
2) 您可以使用以下代码从 main.js 中获取 config.properties 的键值对。
// initialize messageResource.js
messageResource.init(
// path to directory containing config.properties
filePath : 'resource'
);
// load config.properties file
messageResource.load('config', function()
// load file callback
// get value corresponding to a key from config.properties
var value = messageResource.get('key', 'config');
);
【讨论】：
为什么我得到key 作为值而不是属性文件中的写入值？
@Khan 我已经尝试了您在回答中提到的确切过程，但我遇到了与 sarwar026 相同的问题。
首先确保 config.properties 可以通过 url 访问。在调用 messageResource.get 函数之前，您应该使用以下代码加载属性文件。 messageResource.load('config', function() // load file callback );
如果您有一些小的配置错误，该库会静默返回垃圾 == 不，谢谢【参考方案4】：
使用 JSF 非常简单，但是每次需要从 JavaScript 读取新参数时，都必须修改 HTML 文件。 我在项目目录中的属性文件（config.properties）具有以下参数作为键值对。
parameter.key=parameter.value
属性文件名在faces-config.xml
中配置<application>
<resource-bundle>
<base-name>com.example.project.properties.config</base-name>
<var>configuration</var>
</resource-bundle>
</application>
因此，您可以在 HTML 文件内的隐藏输入中使用属性值。
<h:inputHidden id="parameter_key" value="#configuration['parameter.key']" />
并从 JavaScript 函数中，使用以下行读取参数值。
var parameter_value = document.getElementById("parameter_key").value;
享受你的一天..!!!
【讨论】：
【参考方案5】：我知道这在很久以前就被接受为答案，但从来没有真正的“原样” .properties 答案。只有不使用它，而是将其转换为 .js。显然，这将是可取的，但并不总是可能的。如果不可能，比如在某个地方也有 JavaScript 的 Java 应用程序中，并且 .properties 文件被 Java 大量使用并由 JavaScript 共享以避免重复，那么最好使用实际的 .properties 答案。
如果您使用的是 ES6、React、Vue、Angular 等，则可以导入它。假设它是 URL.properties 文件中的 URL 列表。即使在 JavaScript 中也无需指定路径，但需要唯一的名称。
import URL from 'URL';
对于带有点的键，语法可能很棘手，例如 widgetAPI.dev。您不能简单地将其作为 URL.widgetAPI.dev 调用。由于属性文件（内容）一旦到达 JavaScript 就是一个对象，因此您可以像任何 Object 键一样引用它，例如：
console.log(URL['widgetAPI.dev'])
如果你不在 ES6 中，jQuery 有库，并且总是有已经提到的无处不在的 messageResource。
【讨论】：
【参考方案6】：npm install dotenv -D
let port = "8080";
//region read from local.properties
const result = require("dotenv").config(path: "local.properties");
if (!result.error && !!result.parsed) port = result.parsed.port;
//endregion
local.properties
port=9000
【讨论】：
以上是关于如何从项目目录中读取 javascript 中的属性文件？的主要内容，如果未能解决你的问题，请参考以下文章
如何从 React JS 的 react 项目的公共目录中的文件中读取 xml？
如何将一个对象数组中的所有项目从Javascript动态显示为HTML？