Is there a way to add an inline script link reference using Cassette?
What I want is to be able to add something like the following to my page:
#Bundles.AddInlineScriptReference("/MyScripts/TheScript.js")
(note: Bundles.AddInlineScriptReference doesn't exists, just an example)
and have Cassette write out the script link including handling the minification, etc.
<script src="/cassette.axd/asset/MyScripts/TheScript.js?voB4kL0uy2HIpjkJnSuycghlp-8=" type="text/javascript"></script>
I see a way to add inline scripts and bundles but not script link references. I could setup bundles that include individual files. However that seems like it's unnecessarily tedious for a single script that's used throughout an entire section of a site.
Reading the Cassette Bundle helper documentation I thought something like this would work.
#Bundles.Reference("/MyScripts/TheScript.js")
However it throws the following error:
Cannot find an asset bundle containing the path
I'd appreciate any advice. I feel like this is such a simple question that I must be missing something obvious.
bundles.Add<ScriptBundle>("MyBundle", new[]{ "path/to/script/script.js"});
Related
I ran next build followed by next start. It's still rendering with many JS files at once instead of a singular entrypoint.
Is there something I'm missing here? The docs make it seem as though this is all that's needed
The files you see are NextJS code splitting into functional and framework code , you can read more about it here
https://nextjs.org/blog/next-9-2#improved-code-splitting-strategy
I see a comment about a <script file in your head, Next will leave this alone because its just a tag being printed - if you need your own outside JS file to be served by Next, place it in the public directory.
There is such a js file that needs to be included in the head tag
After an incorrect (as I understand it) attempt to do this, I get the following result on the LAN:
We can see that firstly there is some kind of error in the head tag.
Also, when trying to load this script at the end of the body tag
(this is done only for the purpose of experiment) - I cannot at least get a connection via an absolute path(__nuxt/.....)
Question:
What am I missing and how can I correctly connect the required js file?
There are several ways to add this kind of 3rd party scripts. You could either use a dedicated Nuxt module, sometimes plugins is also a good solution but if you want to have it directly embedded like this, you can follow my answer here with all the possible variants: https://stackoverflow.com/a/67535277/8816585
I am trying to use google closure library for my web app's javascript. I have my JS script in static directory along with closure library:
static/
app.js
closure-library
JS code is combined into a single script using closure builder:
static/closure-library/closure/bin/build/closurebuilder.py \
> --root=./static/closure-library/ \
> --namespace="pr" \
> --output_mode=script \
> --output_file=./static/app-calc.js static/app.js
The backend is in Go. Script generated above is included in HTML as:
<script src="/static/app-calc.js"></script>
However, as soon as the page is loaded, deps.js is added to DOM after the above script tag:
<script type="text/javascript" src="deps.js"></script>
Since this file is added without any preceding path, browser this to load this script using current application URL.
Is there any way to change this behavior or prevent addition of deps.js?
As far as I can tell, since the entire library has been combined into a single file, there shouldn't be a need for this file. Closure docs about depswriter mention path being same as base.js, but since base.js is not even included, I don't see how that's suppose have any to effect on applicaton.
Closurebuilder is deprecated and you should use closure compiler directly instead. See How to use Google Closure compiler which covers many of your questions. The wiki page about Managing Dependencies has current details. Note that there is still a lot of old documentation about closure compiler that has not been updated for example https://developers.google.com/closure/library/docs/closurebuilder. Some of those pages are still relevant but others are out of date. The wiki at github is all up to date.
The deps.js file is only needed now for debugging when running directly from source code (without compiling). See https://github.com/google/closure-compiler/wiki/Debugging-Uncompiled-Source-Code.
The compiler will be able to take just the pieces of closure-library that you are using and combine it with your code.
Set a global variable or global object property "CLOSURE_NO_DEPS" to true. This will prevent base.js from attempting to load the deps.js file.
Details can be found in the code:
https://github.com/google/closure-library/blob/master/closure/goog/base.js#L19
Okay so I have a meteor app and I am trying to make templates that have THREEjs animations in them so I can load a specific animation by loading a specific template. I wanted to de-clutter my HTML file by taking out the script tags and moving them to a separate JavaScript file but that wasn't working. I ended up just putting the JavaScript into my HTML and it worked. I was going to just keep doing that and live with the cluttered code but now I have run into a problem.
For some odd reason even if a for loop is inside the script tags, the computer will see the < sign and expect a html tag. At first I thought I had forgotten a closing tag or something but I checked and I haven't. If I delete the for loop (only create one particle) everything works perfectly again. I could fix this by just using escape character for the < sign (<) but I think I should find a solution to the overarching problem so I don't run into similar problems in the future.
I want to put the least amount of JavaScript in my HTML file as possible. (Meteor doesn't like it and neiter do I.)
If I try to just copy and paste my JavaScript into a separate file, it won't find the min.three.js file (it tells me THREE isn't defined)
I would prefer not to use another framework like require.js mainly because I'm not sure how but I will as a last resort if that's the only way to do it
All the examples for THREEjs put the code directly in the HTML file but how can I put it into a separate javascript file and make sure the javascript file finds min.three.js?
This is an overview of what the template looks like. I used jQuery to find actualAnimation2 and appended the container to that. You can also find all the code here
<template name = "animation2">
<div id = "animation2" class = "centered">
<div class = "line"></div>
<h1>Animation 2</h1>
<div class = "line"></div>
{{> animationButtons}}
<!--Put in a threejs animation here -->
<div id = "actualAnimation2" class = "animation">
<script src="client/three.min.js"></script>
<script>
//THREEjs stuff here
//This is what I want to move
</script>
</div>
</div>
</template>
tl;dr: How can I make THREEjs play nice with Meteor?
Any suggestions are welcome and let me know if I can clarify anything. Thank you for your help!
Quoting http://docs.meteor.com/ :
Some JavaScript libraries only work when placed in the
client/compatibility subdirectory. Files in this directory are
executed without being wrapped in a new variable scope. This means
that each top-level var defines a global variable. In addition, these
files are executed before other client-side JavaScript files.
This is exactly what needs to be done with three.min.js because the beggining of the file looks like :
// threejs.org/license
'use strict';var THREE={REVISION:"68"};
So you need to put three.min.js inside cient/compatibility/.
But you are probably better off using a package, choose carefully the one who is more likely to upgrade to revision 69 quickly in a few weeks or so.
If I try to just copy and paste my JavaScript into a separate file, it won't find the min.three.js file (it tells me THREE isn't defined)
It sounds like you're running into an issue where your JS files are loaded before min.three.js. You might be able to fix that by taking advantage of Meteor's JS load order - files in directories called lib are loaded first, so if you put your min.three.js file inside /client/lib it will load before source files outside that directory.
Another option would be to use a package - for example, meteor add aralun:three.
I'm trying to insert reference to the Javascript file in the header by using drupal_add_js(). I placed this line inside the template preprocess function in template.php. The result that the code is not working at all: There is no script link in output as it should be. Can anyone tell me what am I doing wrong?
function phptemplate_preprocess_page(&$vars) {
$url = drupal_get_path("theme","mysite");
drupal_add_js($url."/jquery.js");
drupal_add_js($url."/drupal.js");
.....
Even easier, Javascript that needs to be loaded on all pages can be added in the theme's .info file. See http://drupal.org/node/171205#scripts.
drupal_add_js(path_to_theme().'/js/jquery.cycle.all.js');
$vars['scripts'] = drupal_get_js();
If you place the javascript file in the theme directory, you can just add the following to the themes .info file
scripts[] = myJavaScriptFile.js
After you add this file you need to deactivate your theme and then reactive it.
As pointed by other, simply using drupal_add_js() from a hook_preprocess_page() implementation doesn't work. The references to JavaScript files collected through the multiple calls to drupal_add_js() are used to generate the corresponding markup into the $scripts variables from template_preprocess_page(). But a theme's implementation of hook_preprocess_page() is always called after template_preprocess_page(). So in order to have the files added through drupal_add_js() in your .tpl.php file(s), you need to override the already set $scripts variables:
function THEME_preprocess_page(&$variables)
drupal_add_js(...);
$variables['scripts'] = drupal_get_js();
}
But, you shouldn't have to add jquery.js and drupal.js yourself, it should already be done automatically by Drupal core. If you need to do it yourself, then something is broken on your site. You can (re-)add the files as a quick fix, but you better find the root cause of the issue as it is most likely creating other issues you haven't yet identified (or worked around without realizing it).
drupal_add_js() works, but you are putting it deep into the page rendering process. I suggest you put it in the template.php like you are doing, but in the beginning, outside any function. This is what we did on a few of our projects.