Meteor loads files based on alphabetical order, depth of the directory and whether the file's parent directory is named /lib.
If I have a .js file defining an object containing global settings of the app that needs to be set before any other files uses them, how can this be done except for putting it in nested lib directories?
What I did and was a work around only no the proper way to do it because was for a prototype. Was named with an underscore at the beginning of the file so will be call at the very first.
_myfile.js
secondfile.js
whateverfile.js
Not the best solution but works.
Related
I would like to load images dynamically from an images folder.
Names in the folder like {company_name}.png. The names are stored in a json file along with other company data like name, type, etc.
e.g.:
name: meta
logo: "./images/meta.png"
Is there any way to dynamically load these images like require(changing variable based on the json logo string).
I found some solution online like:
https://stackoverflow.com/a/52598171/7990652
But all the other things are build around the json structure to load all the other data.
Is there any way to load everything from a folder one by one based on the provided logo link in the json?
I also tried to look around for a solution with babilon require all plugin, but I found nothing about that.
P.S. I know there are sevaral threads about this question, but in almost all the threads someone asking "what about if I want to load 100-1000 images?". That is the case with me too, I would like to load a lot of images, not just up to 10-20 which is complately okay with static .js require list.
Dynamically loading local assets at run-time including images is not supported within React Native.
In order to use static assets (images, fonts, documents,...). All assets must be bundled at compile-time with your app.
Attempts to load assets dynamic at run-time without pre-bundled at compile time will cause the app to crash.
Bundle all images you need at compile-time then use image reference in memory at run-time.
const staticImages = {
image_01: require("./path/to/image_01.png"),
image_02: require("./path/to/image_02.png"),
image_03: require("./path/to/image_03.png"),
// ... more images
};
Define this object containing images reference globally and make sure it is executed as early as possible when the app is initializing.
Later access any image reference as below:
<Image source={staticImages[IMAGE_REFERENCE_NAME]} />
No, unfortunately your question is a duplicate of the others you have found, and it is not possible to use require dynamically, no matter how many times you want to do it.
If you can break up the images into multiple components, you can conditionally load those components. But require must be called with a fixed string.
I have a question.
I'm new to webpack4 and I was told to apply it into project which is a .Net MVC & AngularJS 1.6 web app. Project has some imperfections which causes some problems with reusing some functionality inside angular files. So my first step is to bundle all code using webpack4, use babel etc. Yet the problem is in couple .js files like angular services, controllers, plain .js files previous devs used window object. After making couple entries (each entry for app part - service-bundle.js, controller-bundle.js etc) functions, variables which are assigned to window object does not work anymore. My question is - is it possible to some kind of "make" window object common for all entries so whenever new variable or function was assigned to window object in any file will be "visible" and treated as some kind of shared module?
Right now I have to keep files with window.function/variable separate from webpack entries and imported as standalone files.
Cheers
I am making a browser game (client side only). I am trying to make it smaller (meaning file sizes), which is first step for mobile version. I have minified CSS using LESS, JS using uglify and also angular templates using grunt-angular-templates. So at this moment I am loading very small number of files:
index.html
app.js
app.css
images.png (one file with all images)
But the remaining problem are JSON data files. There are (or will be) many levels and each level has its own JSON data file. Also there are some rule definitions etc. The problem is, that these JSON files are loaded dynamically when needed.
I am now trying to find a way, how to somehow get these files (at build time, probably some grunt task) into one file, or even better - directly into app.js. I have no problem in writing PHP script + JS class, that would do this, but I first tried to find some finished solution.
Does anybody know about something like that, or is there any other solution that I am not thinking about? Thanks for any help.
====
EDIT:
1) The point of this is getting rid of X requests and making one request (or zero) for JSON files.
2) The compiled thing does not have to be JSON at all. Part of my idea:
JsonManager.add('path/to/json/file.json', '{"json":"content of file"}');
making all these lines manually is bad idea, I was asking about something, if there is anything, that could do this job for me.
3) Ideally i am looking for some solution similar to what grunt-angular-templates task does with HTML templates (minifies them and adds them to app.js using Angular's $templateCache)
Say you have two JSONs: {'a':1} and {'b':2}.
You cannot simply concatenate them into one chunk as together they will not be a valid JSON, e.g. this {'a':1}{'b':2} is not valid JSON. You can do this with JS and CSS but not JSON.
The only option is to include them into larger structure:
[
{'a':1},
{'b':2}
]
If your code structure allows to do this then you can use any existing JS compressor/uglifier to compress the result.
For anybody who has same problem as me:
I gave up finding already finished solution, and made my own:
The solution
I have written PHP script, that iterates over files in data directory and lists all JSON files. It also minifies their contents and creates one big array, with keys as relative file names and values as JSON content of files. It then creates a .js file, in which this big array is encoded as JSON again and given to a JavaScript variable (module constant in my case - Angular)
I created a wrapper class, which serves this data as files, e.g.:
var data = dataStorage.getData('levels/level01.json'); // returns JSON content of file located at path/to/data/files/levels/level01.json but without any AJAX call or something
I used grunt-shell to automate running this php file
I added the result .js file to list of files, which should be minified by uglify (and connected together).
The result:
I can create any number of JSON files in any structure and link to them from js code using that wrapper class, but no AJAX calls are fired.
I decreased number of files needed to load at startup (but increased app.js size a bit, which is better than second request).
Thanks for your ideas and help. Hope this also helps someone
I'm in the process of converting a Grunt file to a Gulp file. My Grunt file contains the following line
var config = grunt.file.readJSON('json/config.json');
What this line is doing is that it is setting some variables which it then injects into the html it generates, specifically related to languages.
I tried converting the file automatically with grunt2gulp.js but it always fails with config being undefined. How would I write grunt.file.readJSON using gulp?
The easiest way to load a JSON file in node/io.js is to use require directly:
var config = require('json/config.json');
This can substitute any readJSON calls you have and also works generally. Node/io.js have the ability to synchronously require json files out of the box.
Since this is a .json file, Benjamin's answer works just fine (just require() it in).
If you have any configs that are valid JSON but not stored in files that end in a .json extension, you can use the jsonfile module to load them in, or use the slightly more verbose
JSON.parse(require('fs').readFileSync("...your file path here..."))
(if you have fs already loaded, this tends to be the path of least resistance)
The one big difference between require (which pretty much uses this code to load in json files) and this code is that require uses Node's caching mechanism, so multiple requires will only ever import the file once, and then return points to the parsed data, effectively making everything share the same data object. Sometimes that's great, sometimes it's absolutely disastrous, so keep that in mind
(If you absolutely need unique data, but you like the convenience of require, you can always do a quick var data = require("..."); copied = JSON.parse(JSON.stringify(data));)
I'm removing some views that are no longer in use and I'm just wondering if it's safe to delete the corresponding js files. For example, if I delete the file
views/admin/products/index.html.erb
Then, is it generally okay to delete the file
public/javascripts/app/views/admin/products/index.js
It depends on what's inside the js (or coffee) files. So, if you never used the js file, meaning the file has the default text added by rails when the file was first generated, than yes, it's fine to delete. However, if you're including that file in other views because you have some custom code in that file than you should probably extract it elsewhere first.
Also please note, if you delete that file, make sure you're not rendering it in your controllers.
It's your wish.If the file doesn't contains any data.you can delete it.