简体   繁体   English

如何从项目目录中读取javascript中的属性文件?

[英]How to read a properties file in javascript from project directory?

I'm building a Chrome Packaged App.我正在构建一个 Chrome 打包应用程序。 I want to put the script configuration if a config file in a resource directory and on startup want to read that by Javascript.如果配置文件位于资源目​​录中并且在启动时想要通过 Javascript 读取该配置文件,我想将脚本配置放入。

For example例如

  • Project项目
    • WebContent网页内容
      • index.html索引.html
      • manifest.json清单文件.json
      • main.js主文件
      • resource资源
        • config.properties config.properties

Here I want main.js to load config.properties file in the beginning and get key-value pairs.这里我希望 main.js 在开始时加载 config.properties 文件并获取键值对。

Have anyone done something like this?有没有人做过这样的事情?

There is a super simple way to do this, along the lines of sowbug's answer, but which doesn't need any XHR or file reading.按照 sowbug 的回答,有一种超级简单的方法可以做到这一点,但不需要任何 XHR 或文件读取。

Step 1. Create resource/config.js like so:步骤 1. 像这样创建 resource/config.js:

gOptions = {
  // This can have nested stuff, arrays, etc.
  color: 'red',
  size: 'big',
  enabled: true,
  count: 5
}

Step 2. Include this file in your index.html:步骤 2. 将此文件包含在您的 index.html 中:

<!doctype html>
<head>
  <script src="resource/config.js"></script>
  ...

Step 3. Access your options directly from your main.js (or anywhere):第 3 步。直接从 main.js(或任何地方)访问您的选项:

  ...
  if (gOptions.enabled) {
    for (var i = 0; i < gOptions.count; i++) {
      console.log(gOptions.color);
    }
  }
  ...

You can use messageResource.js , a simple javascript library created by me for loading properties file.您可以使用messageResource.js ,这是一个由我创建的用于加载属性文件的简单 JavaScript 库。

1) Include messageResource.js in your index.html. 1) 在 index.html 中包含 messageResource.js。

<script src="messageResource.min.js"></script>    

2) You can get key-value pairs of config.properties from main.js using the following code. 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');
}); 

I know this was accepted as answered a long time ago but there never was a true "as is" .properties answer.我知道这在很久以前就被接受了,但从来没有真正的“原样”.properties 答案。 There was only don't use that and instead convert it to .js.只是不使用它,而是将其转换为 .js。 Obviously that would be preferable but not always possible.显然,这会更可取,但并非总是可行。 If it's not possible, say in a Java application that also has JavaScript somewhere and the .properties file is very much used by Java and shared by the JavaScript to avoid duplication, then an actual .properties answer would be best.如果不可能,比如说在某个地方也有 JavaScript 的 Java 应用程序中,并且 .properties 文件被 Java 大量使用并由 JavaScript 共享以避免重复,那么实际的 .properties 答案将是最好的。

If you are using ES6, React, Vue, Angular, etc. then you can import it.如果你使用的是 ES6、React、Vue、Angular 等,那么你可以导入它。 Let's say it's a list of URLs in a URL.properties file.假设它是 URL.properties 文件中的 URL 列表。 There is no need to specify the path even in JavaScript but a unique name is required.即使在 JavaScript 中也不需要指定路径,但需要唯一的名称。

import URL from 'URL';

The syntax can be tricky for keys with dots in them, such as widgetAPI.dev.对于包含点的键,例如 widgetAPI.dev,语法可能很棘手。 You can't simply invoke it as URL.widgetAPI.dev.您不能简单地将它作为 URL.widgetAPI.dev 调用。 Since the properties file (content) is an object once it gets to JavaScript so you can reference it like any Object key, such as:由于属性文件(内容)一旦进入 JavaScript 就是一个对象,因此您可以像引用任何对象键一样引用它,例如:

console.log(URL['widgetAPI.dev'])

If you are not in ES6, jQuery has libraries and there is always the ubiquitous messageResource already mentioned.如果你不是在 ES6 中,jQuery 有库并且总是有已经提到的无处不在的 messageResource。

npm install dotenv -D npm 安装 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

Structure the file as JSON.将文件结构化为 JSON。 Read it into a string using the File API or XHR.使用 File API 或 XHR 将其读入字符串。 Then JSON.parse(string).然后是 JSON.parse(string)。

It is pretty simple with JSF, but you will have to modify the HTML file every time you need a new parameter to be read from JavaScript.使用 JSF 非常简单,但是每次需要从 JavaScript 读取新参数时都必须修改 HTML 文件。 My property file ( config.properties ) in project directory has the following parameter as a key value pair.项目目录中的我的属性文件 ( config.properties ) 具有以下参数作为键值对。

parameter.key=parameter.value

The property file name is configured in faces-config.xml属性文件名在faces-config.xml中配置

<application>
    <resource-bundle>
        <base-name>com.example.project.properties.config</base-name>
        <var>configuration</var>
    </resource-bundle>
</application>

Therefore, you can use a property value in a hidden input inside the HTML file.因此,您可以在 HTML 文件内的隐藏输入中使用属性值。

<h:inputHidden id="parameter_key" value="#{configuration['parameter.key']}" />

And from JavaScript function, use the following line to read the parameter value.并从 JavaScript 函数中,使用以下行读取参数值。

var parameter_value = document.getElementById("parameter_key").value;

Enjoy your day..!!!享受你的一天..!!!

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

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