I have a webpack project (based on https://github.com/vuejs/vue-webpack-example) which generates an index.html file and a javascript file containing the application.
Everything works fine when I include the JavaScript like this:
<script src="static/js/app.js"></script>
When I try to include the contents of static/js/app.js directly in a script tag (because we need to end up with a single .html file) it doesn't work anymore. It looks like the javascript doesn't get exectuted at all:
<script>!function(e){function t(i){if(n[i])return...</script>
I extracted the application into 3 files (manifest.js, vendor.js and app.js) where vendor.js contains the libraries I need from node_modules. It works as long as I don't include vendor.js directly. So I can inline the manifest.js and app.js but not vendor.js.
Any ideas why the inlined js doesn't work but the included js via an url does work? Until now I thought js would behave exactly the same, no matter how it's included.
I figured out what's wrong.
Some browsers (I tested Safari and Chrome on Mac) seem to not like <script> tags which have an opening script tag somewhere inside them. Even though all the closing script tags are escaped (like document.write("</script"+">"))
Strangely this does work in simple example like this one:
<script>
document.write("<script>alert(1)</script"+">")
</script>
In complex examples (like this one: https://gist.github.com/Sopamo/f2a591b4afaa91238516b82006e85845)
it only works when all <script> tags are "escaped". Maybe someone can find out what's the difference between the simple and the complex example.
In my case I used the inline example of the html-webpack-plugin which I modified as follows:
script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source().replace(/<script>/g,'<script"+">')}
Note the replace() call at the end.
You shouldn't need to include the app.js file. If you run npm run build from project folder it will create all files needed to run the application inside the dist folder.
Remember also that the app must be served from an HTTP server in order to work.
Related
I'm not sure if this is the best way to articulate my question.
I have a script that I want to run on one page on the site.
All of the .js files are included/imported into an app.js file which is then minified and included in the layout.html which is used on every page.
There is one javascript file I want to use only on 1 of those pages(The pages that I don't need it on creates an error in the console so I can't just leave it). What is the best way to include it. Can I still include it with the minified script but only on that page?
You basically have three options:
Include the script in the minified app.js, but modify it so it checks whether it's needed (e.g., check that the things it needs to work on are present rather than assuming they're there) before running. That way, app.js is the same on all pages, can be held in cache, your build script is straightforward, etc.
Have app.js, which doesn't include the script, and a separate minified version of the script that you only include on the desired page, using a separate script tag. Your build script is still fairly simple, and it only adds a single HTTP request to the target page.
Have two minified app.js files, app.js and app-plus.js (or whatever). Include app.js on all other pages, but include app-plus.js on the target page. This complicates layout.html because it has to determine which script to include, and complicates your build script (very slightly).
Unless the page-specific script is massive, option #1 is likely to be your best bet because of the simplicity (an extra few kilobytes once the HTTP connection is established aren't usually a big deal), but it really depends on your situation. If you need to support fairly low-bandwidth consumers (mobiles on high-rate data packages), that might argue against always including the script. It's up to you.
If you are building regular HTML + CSS + JS page, then you can just add this javascript file (or more if you want) to a separate folder and then call it in the HTML file you want.
EG - this is your structure
-index.html
-about.html
-js-for-minify/do.js
-js/not.js
-dist/minified.js
-css
you can reference the about.html to have a script tag which is directed of the unminified file.
<script src="js/not.js">
while for the index.html you can reference the minified file
<script src ="dist/minified.js">
So I have never used turbogears before but the company I am interning at has turbogears to run their JS files. I am trying to integrate my new JS code into their files but running into repeated errors just calling the scripts and was wondering if anyone had any experience with this.
The code so far
<script type="text/javascript" data-main="${tg.url('/pv/demo.js')}" src="${tg.url('/pv/js/require.js')}"></script>
So I know it finds the require JS file with the $(tg.url()) command but I am experiencing issues with it calling other JS files in the pv directory. Getting a red GET and failure to load resource in my console.
Idea (terrible one)
If I call each script in the html file using the turgogears command which would honestly take some time since there are around 20 files. It wouldn't look as clean too.
Question
Is there a way to run that command on all the files or make it work with require.js different from what I had before?
UPDATE
Hey so in require js we have the command
requirejs.config({
'baseUrl': 'src',
});
Which well tell the html page to load up all the JS files in the src file first.
But if I need to run turbogears in the HTML page for it to fetch files how would I go about doing that? I did try to copy and paste the command of
${tg.url('/pv/src')}
but that sure as hell didn't work. Any suggestions
?
tg.url just returns the string of url, so there is usually no difference between writing /py/demo.js and ${tg.url('/pv/demo.js')}.
What tg.url will do for you is to compensate for SCRIPT_NAME in case your application is running on a subpath, but when developing locally through gearbox or when deploying on the root of a virtual host you shouldn't notice any difference in the generated urls.
Can you try to better express your problem? It seems to me it might be more related to requirejs than to turbogears itself and you might need to set requirejs baseUrl ( see http://requirejs.org/docs/api.html#config-baseUrl )
I want to add the CDN-hosted Firebase Javascript file to my application based on ng-boilerplate.
I tried just adding it to vendor_files in build.config.js, but it isn't included in the output index.html - maybe because it can't find the file locally?
The application works if I add it to the index.html template directly, but that's unclean and breaks the tests.
Is there a way to add external files to ng-boilerplate or modify the Gruntfile to add them?
According to the docs,
the vendor_files.js property holds files to be automatically
concatenated and minified with our project source files.
so that won't work. According to Kato's link, it's still under consideration for v0.4.
Have you looked into angularfire?
As for having the files hosted from firebase cdn, add the following right after (or before) the google plus script:
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
i ran the code found here http://www.mkyong.com/jquery/jquery-hello-world/ but eclipse doesnt seem to run the jquery code ? i placed the jquery.js file in all the directories found under the project name but still no luck. Where exactly should the .js file go ?
The <script> tag should go inside <head> or <body>, not in between. The behaviour is unspecified and thus browser specific (it however works fine for me on Eclipse 3.6 SR2).
As to the location of the .js file, the <script src> in the code example declares just the filename without a path, so it is supposed to be in the same path/folder as the HTML file.
I took a snapshot of the jquery.js file and jquery-ui files that I use and dumped them into a giant .js file with all of the other .js files that I use for my site.
When I do just this with no minfication/packing, the files stop working and I get "recursion too deep" errors on the file when I try to load it on my site instead of the usual .js files. All of the errors came from jquery and jquery-ui. Using a simple numbering scheme I made sure that the jquery.js/jquery-ui files were the first listed in the file and in the correct order (the same as includes as individual files.)
Two questions:
1) Doesn't the include tags for JavaScript have the same effect as dumping all of the files into one giant file? Is there extra isolation/insulation that JavaScript files get from being in their own script tags or in different files?
2) My goal is to make my site faster by having one huge .js file with all JavaScript I ever use in my site (which is heavy in JQuery) and minify that file. Why is this misguided? What is a better way to do it?
NOTE: Google's CDN version of the JQuery files don't work for me, all of the JQuery plugins/themes I use don't work with Google's versions (anyway who says that they can successfully use Google's CDN is lying.)
UPDATE: Thanks for the good advice in the answers, all of it helped me learn more about deploying JavaScript files on a production server. I am actually always using the latest SVN branch of the JQuery UI plugins and there were errors in the UI plugins that prevented them from being merged together with my files. I got the latest Theme Rolled plugins that are already minified in one file and that worked around the problem.
Probably your JavaScript files have some syntax errors. Browser can correct them when loading files one by one, but fail when "bad" files combined. You can try to compile your file using Rhino compiler (http://www.mozilla.org/rhino/)
java -cp build/js.jar org.mozilla.javascript.tools.jsc.Main giant.js
Also you can use JSLint validator (http://www.jslint.com/), thought likelly it will not be able to handle jQuery. But you still can combine all your files and validate them.
I'd recommend using a script manager such as this one to only register the files and plugins you need, and load them on the fly.
This keeps your requests to a minimum, and you don't have to load some huge 300k JS file one very page.
Another problem could be the load order changed. Most JavaScript files should be load order independent, but if you load jquery at the end after you have your:
$(document).ready(function() {});
you'll run into problems.