Javascript: import error and can't non find variable - javascript

I downloaded this d3 JavaScript project from GitHub https://github.com/mcaule/d3-timeseries, and then I created an HTML page (index.html) to run the project. This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./d3_timeseries.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script type="text/javascript" src="./d3_timeseries.js"></script>
<script type="text/javascript" src="https://mcaule.github.io/d3-timeseries/dist/create-example-data.js"></script>
<body>
<div id="chart"></div>
<script>
var data = createRandomData(80,[0,1000],0.01)
var chart = d3_timeseries()
.addSerie(data,{x:'date',y:'n',diff:'n3'},{interpolate:'monotone',color:"#333"})
.width(820)
chart('#chart')
</script>
</body>
</html>
I have a problem in d3_timeseries.js with this two errors:
NOTE: I don't want to use min files

The exact file that you have linked, d3_timeseries.js, is not written in such a way that it can be used, without processing, in a browser.
Its very first line import * as d3 from "d3"; will fail, no matter what browser, because "d3" is not a URL that can be evaluated correctly from a browser context. It is not a relative URL, it is not a
It looks like it is intended to be utilized by webpack or some other script bundler. If you used this in a webpack context to bundle your code, it would load "d3" from node_modules.
I know that you said that you "don't want to use min files", so your options are either compile your own bundle or just use the min files in the /dist folder.

I'm assuming you used the file in the src directory. This isn't a regular javascript file, it's node. Luckily the author is buidling what looks to be a web safe version in the dist folder. That version is minified, uglified, and ran through babel.
You rarely want to include files from src or files that aren't uglified. That will cause your webpage to load extra white space data that it does not need.

Related

how to use pdf.js without defining pdf.worker location

I meet a problem when using pdf.js to view pdf. The problem comes from the
PDFJS.workerSrc setting. Is that possible to include the pdf.worker.js in
header, like
<script type="text/javascript" src="./../jsfiles/pdf.worker.js"></script>
and not using
PDFJS.workerSrc = './../jsfiles/pdf.worker.js';
is that possible for that? Thanks a lot.
From the documentation:
In order to bundle all src/ files into two production scripts and build the generic viewer, run:
$ gulp generic
This will generate pdf.js and pdf.worker.js in the build/generic/build/ directory. Both scripts are needed but only pdf.js needs to be included since pdf.worker.js will be loaded by pdf.js. The PDF.js files are large and should be minified for production.
This means that you only need to add the following code:
<script type="text/javascript" src="pdf.js"></script>
Remember that all files generated should located in the same directory as pdf.js

jangaroo loader index.html file

In the Jangaroo tutorial using Maven it states"include a Jangaroo application script generated by the Maven build process". This should be created in src/main/webapp/index.html, it isn't. Can anyone explain this, or what in the pox.xml is missing?
Thanks
The misunderstanding here is that actually, the Jangaroo application script is generated, not the index.html file.
The idea is that your index.html usually contains custom HTML, e.g. loading your CSS or setting up some context. The only Jangaroo-specific things your HTML code has to do is load the generated joo/jangaroo-application.js script and run the application's main class, using its fully-qualified name (in this example, HelloWorld is in the top-level package):
<script type="text/javascript"
src="joo/jangaroo-application.js"></script>
<script type="text/javascript">
joo.classLoader.run("HelloWorld");
</script>
https://github.com/CoreMedia/jangaroo-tools/wiki/Tutorial-~-Deployment

Loading JavaScript library from CDN works, from local file doesn't

I have a problem where loading a JavaScript library via CDN works, but serving it from my own server with bower doesn't. The following is a minimal example of what is happening (just a HTML file that can be opened directly):
Loading system#0.16.11.js from a CDN
<html>
<head>
<script src="https://jspm.io/system#0.16.11.js"></script>
</head>
<body></body>
</html>
If I open the Firefox Web Console and enter System, I get:
System
Object { normalize: f/e.normalize(), locate: m/e.locate(), fetch: c/e.fetch(), translate: d/e.translate(), instantiate: d/e.instantiate(), _loader: Object, baseURL: "file:///…", paths: Object, originalSystem: Object, noConflict: $__global.upgradeSystemLoader/p.noConflict(), 17 more… }
Loading system#0.16.11.js from a local directory
Then I downloaded the JavaScript file into the same directory as the HTML file and modified it to:
<html>
<head>
<script src="system#0.16.11.js"></script>
</head>
<body></body>
</html>
If I enter System in the console now, I get:
System
ReferenceError: System is not defined
I should add that window.upgradeSystemLoader is present, which is a function that is defined in the JavsScript library. So at least the file is being detected.
What is the difference? I am trying to serve System.js via bower from my own server, but I always end up in this situation: CDN works, local file doesn't.
Something is missing es6-module-loader#0.16.6.js i think systemJs helps you load that js file. If you check your console. you would find that that es6-module is missing.
In the system file it requires this src="'+basePath+'es6-module-loader#0.16.6.js
You can either download it or change the path in the systemJs source file
You could download it here es6-modules

How do I automatically, with Grunt, reference the new (minified & concatenated) JavaScript files in HTML?

My index.html page looks like this:
<html>
<script src="js/file1.js"></script>
<script src="js/file2.js"></script>
<script src="js/file2.js"></script>
</html>
Using grunt i was able to concat and minify the js files into one file at prod/js/file.min.js. I also have a new index.html page at prod/index.html that is minify.
The problem now is that this new index.html page still reference the old three javascript files and not the new single javascript file. How would I go about changing this in grunt?
final html file should be:
<html>
<script src="js/file.min.js"></script>
</html>
You can use grunt-processhtml plugin to replace it
https://www.npmjs.com/package/grunt-processhtml

RequireJS does not follow relative path for data-main with baseUrl set

Using requireJS, I am trying to specify a path for my data-main that is different from the baseUrl. It seems that requireJS is ignoring whatever I type before the file name, and always look for the file in the baseUrl folder.
I have the following folder structure :
index.html
scripts/
lib/
require.js
test/
main2.js
config.js
Contents of index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script data-main="test/main2" src="scripts/lib/require.js"></script>
<script src="scripts/config.js"></script>
</head>
<body></body>
</html>
Contents of config.js :
requirejs.config({
baseUrl: "scripts"
});
And I am getting a 404 error for : GET [...]/scripts/main2.js , even though it should be looking for [...]/scripts/test/main2.js. If I remove the config.js file and use data-main="scripts/test/main2" it works, but I would like to be able to specify a baseUrl for my project.
Any ideas ?
Edit : following the answer by Waxen :
Even if I use "scripts/test/main2", "/scripts/test/main2", or "whateverIWant/main2" in my data-main, it oddly always looks for "scripts/main2.js"
Note that I am using requirejs 2.1.8
This isn't working how you want it to because you're calling require with a data-main before you're setting the baseURL. I'm not sure why it's trying to go to scripts/main2.js though; I would expect it to attempt to load test/main2.js rather than scripts/main2.js. However, that's beside the point.
What you need to do is make sure that your baseURL is available to require before it tries to load you data-main. This can be accomplished by including your config first and using the syntax from the second example here: http://requirejs.org/docs/api.html#config.
Contents of index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script src="scripts/config.js"></script>
<script data-main="test/main2" src="scripts/lib/require.js"></script>
</head>
<body></body>
</html>
Contents of config.js :
var require = {
baseUrl: "scripts"
};
I read this thread and couldn't quite understand why using the data-main attribute to point to a configuration js file wouldn't be the same as specifying the configuration before loading Require, as the answer to this thread suggests.
In my experiments, I learned that setting values using a data-main config js file might work (then, again, it might not). To those new to Require and AMDs and asynchronisity in general, the "might work" notion has to do with the fact that asynchronous operations run when then can--and not in any predictable order.
Having established that, there is a very important point made in the current version of the RequireJS documentation that eluded me until now:
You may also call require.config from your data-main Entry Point, but
be aware that the data-main script is loaded asynchronously. Avoid
other entry point scripts which wrongly assume that data-main and its
require.config will always execute prior to their script loading.
For further information, see: http://requirejs.org/docs/api.html#data-main
Being new to RequireJS, I was mildly appalled to learn this--and I wasted a lot of time trying to debug path-access problems. At this stage it is unclear to me why anyone would use data-main (especially to define a baseUrl) since this reference will only randomly work. Instead the solution suggested by this thread (in which you set the baseUrl in a script tag that is NOT asynchronous, will work as expected and will reliably set the RequireJS configuration before kicking-off RequireJS.

Categories

Resources