I'm using Mapbox, and I'm trying to convert a Geojson to a zipped shapefile using shp-write. But when I follow the example given on the GitHub page, I'm getting a "ReferenceError: require is not defined" error on this line:
var shpwrite = require('shp-write');
This is a jsfiddle in which you can test this. I'm relatively new to JavaScript, and haven't had to use the 'require()' function before.
The jsfiddle you provided includes several external resources, among which a shpwrite delivered by unpkg that you may be missing.
Usually require doesn't exist in your browser. You would need to execute it with Node.js or use a module bundler like Webpack, but Unpkg takes care of it for you.
So adding:
<script src="https://unpkg.com/shp-write#latest/shpwrite.js"></script>
on your page should make it work.
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 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.
I have recently got a chance to explore one famous JavaScript library; In that library, I have found one strange way of referring JavaScript library from HTML page.
The application folder structure looks like this,
index.html contains the reference of subroot.js;
index.html
<head>
<title>Index</title>
<script src="js/subroot.js"></script>
</head>
subroot.js only contains the following code (i.e.,the relative path of root.js)
subroot.js
../../js/root.js
When I try to run the index.html, i get syntax error in the first line of subroot.js
Questions:
Is it right way to refer another javascript library by its relative path?
If yes, Why I get error message on the web page?
JavaScript by itself doesn't support loading files or referring paths. You need a module loader of some kind to achieve what you want. With the new version of the standard (ECMAScript 6) there is something called "imports" which you might find useful. I have experience using JSPM and the SystemJS module loader, which makes it pretty easy to connect the dots.
However, without using any additional tools you should just inject another script tag in your HTML.
Just reference root.js in the HTMl file not in the Subroot.js file, you can't reference another .js file from a .js file as far as I know.
<script src="../js/root.js"></script>
See Link
write this in subroot.js file
var x = document.createElement('script');
x.src = '../../js/root.js';
document.getElementsByTagName("head")[0].appendChild(x);
Is it possible to get a proper JavaScript source file if I have the minified file and its corresponding source map?
I know how to prettify JS code (line-breaks and indents), but I would like to get original function / variable names in the file, to be able to better understand the source code.
I would like to get the un-minified JS file to work with, instead of using it to debug in a browser.
PS It is probably somewhere right under my nose, but I didn't manage to find it so far. Sorry if this was already asked!
To work sourcemaps requires both files, minified and original, often original is included in sourcemap file(it has optional sourcesContent for sources that can not be hosted).
Sourcemap is just JSON file, and you can found all needed information inside:
sources - list of source file names,
sourcesContent - optional list
of original sources, if source is not presented it would be null
here.
Utility script, I have written before for this purpose: https://gist.github.com/zxbodya/ca6fb758259f6a077de7
I suggest using the Source Map Visualization tool online to view the original code with both js file and js soucemap file.
https://sokra.github.io/source-map-visualization/
I think you won't be able to completely revert such code to its original state as a lot of information (for example comments or certain variable names) is simply lost in the process. When I understand it correctly for sourcemaps to do this you still need the original file.
If you only aim to prettify the code so its readable again you do not need source maps. Many advanced editors have such functions. For example if you are using Sublime text there is this plugin: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify which does a great job.
Also see this similar question: How can I debug a minified JS in firebug?
Recently I added conf/ApplicationResources.groovy (using resources plugin) file to my project structure. Here I keep my modules definitions for javascript and css libraries. Before, I was importing libraries with classic g:javascript tag.
Now every time when javascript code changes (while server is running) I get client side js error saying
"Uncaught SyntaxError: Unexpected end of input".
So for each javascript change application needs to be redeployed, what I dont want.
I have also declared .js files to be excluded from resources plugin pattern, but the problem remains. Any advice/help will be appreciated.
Solution from Sérgio Michels that worked:
Add to Config.groovy: "grails.resources.debug = true;"
To avoid cache issues with the Resources plugin, in all my projects I'm using the config grails.resources.debug = true in Config.groovy.
You still use <r:require modules=""/> in your GSP, but in development mode the source will show all files included instead of merging them.