I've been banging my head against the wall for a while now, trying to get browserify working for me. I'm starting with what should be really the simplest example, replacing a javascript page with its browserified page (when there's no requires in it!). So, here's what I did:
I had a page, "javascript.js" that was already incorporated into my site. I went to its folder, and ran the command
browserify ./javascript.js > bundle.js
I figure that should be an identical file (functionally) to javascript.js. So, I go to my index.jade file and replace
script(src='javascript.js')
with
script(src='bundle.js')
(Those are the equivalent of script tags in html)
But it didn't work! The website now throws the error that a certain variable from my browserified file is undefined (the error comes from a function call in another file). What gives? What am I doing wrong? Am I thinking about bundles incorrectly? It seems like this is following instructions, but it's just not working.
Thanks for the help in advanced, I've really been at this for a while now with no progress.
Related
I'm programming a project using HTML and JavaScript. I access my js code with the following script tags:
<script src="js/monthChanger.js"></script>
However, when running my program in Edge & Google Chrame, I keep getting
this error.
Why is this happening? Looking at my file directories there doesn't seem to be anything wrong with the way I declared the function.
check out this article on absolute and relative paths
you probably want this:
<script src="./js/monthChanger.js"></script>
The ./ makes it relative to the current folder.
Alright, so it turns out my issue had nothing to do with HTML.
I didn't specify this in the OP, but I was also using a Django's framework in my project. I had mistakenly assumed that static fields such as css, js, and images would be called the same way they are called in normal html files. However, after reading django's documentation on managing static files, I realize that this is not the case. I follow django's instructions and was able to get my code working.
I'm teaching myself Django, and decided to try out some JS functionality. I included a simple text-changing function (from w3schools) in a JS script to try things out. The app is blog, and the JS script lives in blog/static/blog/test.js. There's only one function in there:
function myFunction() {
document.getElementById("demo-btn").innerHTML = "Text changed.";
}
Which is linked to a button in blog/templates/blog/post_list.html, id="demo-btn".
Website live here: http://andreyito.pythonanywhere.com
It works fine on my localhost, but when I push it to pythonanywhere, nothing happens (clicking on the Click me button is supposed to change the text just above the button.)
This feels like a minor thing that I'm leaving out, but I haven't been able to easily troubleshoot this. Repo here:https://github.com/Don86/djgirls
Your test.js file is not loading in the pythonanywhere hosting:
You can see their documentation on how they work with static files. Also maybe you did not run python manage.py collectstatic which loads the file in the static directory. Please see the documentation for more details. Also you can check how they setup the static files in this documentation.
I would like to use this library (https://github.com/riichard/boolean-parser-js) (which is really just a function?) in my own project.
My project is contained in a single html file. In one of the functions, I've tried including the following:
var parser = require('boolean-parser');
I get the following error when I include this.
Uncaught ReferenceError: require is not defined
I have installed the library via the terminal, using "npm install boolean-parser". At the same level as my project, I see a file called "node_modules", which contains "boolean-parser".
I'm not sure if this is the right method of referring to the library...
I'm also not sure how to find out what it.
If possible, please explain terminology in your answer(s)-- I have limited background knowledge in this area, as this is essentially my first real web project!
Happy to include code upon request. Feel free to suggest tag additions!
P.S. Could it be a file path problem? Do I need to use something like Browserify?
P.P.S. If I include
<script src="node_modules/boolean-parser/index.js"></script>
then it seems like the library is working, but then I get an error from within it:
index.js:295 Uncaught ReferenceError: module is not defined
at index.js:295
It is because you are making client side project. Here is related question link
Listen, i created simple html page with 2 script tags. First contains src="index.js" which is in the same folder and edited as i said before. Second script tags is:
<script>
console.log(window.module):
</script>
And everything works. Check yourself again.
Problem Summary:
I have a simple html boilerplate that I'm trying to link a javascript file to, something I've done a million times. However, when I write my script tag Visual Studio is giving me the following warning:
Warning TS6053 (JS) File
'//PROAPPSRV/inetpub/wwwroot/WorkOrder-New/ConfigApp/Assets/templates/packages/mustache.js.0.7.2/content/Scripts/mustache.js'
not
found.
Now I know this seems cut and dry, the file I'm pointing to is not at that location. Which is true, however, the location in the warning is not the location I'm pointing to with my script tag.
Problem Details:
Here is my script tag:
<script src="/packages/mustache.js.0.7.2/content/Scripts/mustache.js" type="text/javascript"></script>
As you can see I'm pointing to the root directory, and then into the packages/etc to find the .js file.
Folder Structure:
WorkOrder-New(root) > ConfigApp > Assets > templates > quote_template.html
WorkOrder-New(root) > packages > mustache.js.0.7.2 > content > Scripts > mustache.js
And as you can see, the directory it's trying to hit is:
//PROAPPSRV/inetpub/wwwroot/WorkOrder-New/ConfigApp/Assets/templates/packages/mustache.js.0.7.2/content/Scripts/mustache.js
So it's essentially treating my src as if I had left the '/' off the front and were looking for a subfolder in my starting directory.
What I've Tried:
I tried to google this error as many ways as I could think to phrase it, but didn't find anything that seemed to be a similar issue.
I verified the case of the folder and files to make sure I wasn't messing it up with improper case. I also tried linking it through Visual Studio's UI, with the same result.
I attempted to use a different a non relative path by changing my script tag to:
<script src="../../../packages/mustache.js.0.7.2/content/Scripts/mustache.js" type="text/javascript"></script>
Which instead gives me this path in the error:
//PROAPPSRV/inetpub/wwwroot/WorkOrder-New/ConfigApp/Assets/templates/PROAPPSRV/inetpub/wwwroot/WorkOrder-New/packages/mustache.js.0.7.2/content/Scripts/mustache.js
Which just looks like it's looking for the complete correct directory within the folder the html file is in.
Summary:
I'm sure there's some config setting or something that is at the root of this problem, but I'm not sure what it would be and I inherited this admittedly messy project so I'm hoping someone can point out where I'm going wrong here.
Thank you in advance!
I have a website, which uses different javascript plugins, and a bunch of js files to run (~30). I wanted to try to group these js files into a single file, and tried to apply a basic minification to it(only removing whitespaces) using Google's Closure Compiler.
I've introduced all of the js files, in the same order as they are included in my page to the Closure Compilers online version, and run the compilation. The parameters for the compilation looked like this:
// ==ClosureCompiler==
// #output_file_name default.js
// #compilation_level WHITESPACE_ONLY
// .... bunch of javascript files here
// ==/ClosureCompiler==
The compilation ran with success, there were neither warnings nor errors. I then fetched the result file, copied it to my server, and tried to include it to my page.
The page runs, but a strange error appears, which stops my javascript in the middle of it's operation:
TypeError: event.feature.values_ is undefined
I've tried to fetch the space where this error is happening, the code there looks something like this:
this.vectorLayer.getSource().on("addfeature",function(event){if(typeof event.feature.values_.type=="undefined")return;
This is something which my own javascript code is doing, but this part of the code shouldn't even run when the page is loading. When I use the separate javascript files, the page loads just greatly, without any errors, but with the white-space removed, and the files combined, this error appears.
With basic logic, I tought that by adding together the .js files in the same order in which they are included on my page, and only removing the white-spaces to get a smaller file size shouldn't result in any errors, as the browser loads the js files in synchronously anyways. Am I mistaken in this regard? If not, what could the possible reason for this error be?
EDIT 1:
Okay, so I narrowed down the problem to a single .js file, the javascript file of OpenLayers. If I do not compile that file, and include it separatly, everything works fine. What could be causing this strange problem?
As it turns out, this was caused by a strange caching mechanism on Google's side. Restarting the Closure Compiler, and reintroducing all the js files once again, then recompiling it, solved my problem.
Thanks for the comments guys!