Load standalone js library using webpack - javascript

I'm trying to add this library to my project: https://github.com/DragonBones/DragonBonesJS/tree/master/Phaser/Demos
I use webpack for merging all libraries, it produces such output in index.html:
<script type="text/javascript" src="./dist/vendor.bundle.js"></script>
<script type="text/javascript" src="./dist/bundle.js"></script>
I'd like to inject required files between vendor.bundle.js - which, as I suspect contains all remaining libraries merged into one file - and bundle.js - which contains my game. I could also inject them at the end of vector.bundle.js, it doesn't matter for me. Unfortunately I don't know how to do that.
Let's say that's the list of files I need to load:
<script src="./libs/dragonBones/dragonBones.js"></script>
<script src="./out/DragHelper.js"></script>
<script src="./out/BaseDemo.js"></script>
<script src="./out/HelloDragonBones.js"></script>
<script src="./out/AnimationBase.js"></script>
<script src="./out/DragonBonesEvent.js"></script>
<script src="./out/AnimationLayer.js"></script>
<script src="./out/BoneOffset.js"></script>
<script src="./out/InverseKinematics.js"></script>
<script src="./out/BoundingBox.js"></script>
<script src="./out/ReplaceSlotDisplay.js"></script>
<script src="./out/ReplaceAnimation.js"></script>
<script src="./out/CoreElement.js"></script>
<script src="./out/PerformanceTest.js"></script>
Is there a way to modify index.html template to include them between these two files mentioned earlier? Or maybe there is better way of doing that?

Related

Unable to reference jquery

I have a feeling I'm missing something obvious, could someone please help? I'm unable to reference jquery and mustache using <script> tags.
404 messages
file structure 1
file structure 2
<script src='/js/handlebars-v3.0.1'></script>
<script src='js/handlebars-v3.0.1'></script>
<script src="js/jquery-1.11.2.min"></script>
<script src='http://localhost/learning/js/handlebars-v3.0.1'></script>
<script src="js/main.js"></script>
if you notice, I'm able to read in main.js just fine using <script src="js/main.js"></script> but not with <script src='js/handlebars-v3.0.1'></script>
appreciate any help, thanks.
You misspelled the Javascript file names:
It should be:
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/handlebars-v3.0.1.js"></script>
<script src="js/main.js"></script>
Same for other Javascript files. Also, you included multiple copy of same JS.
Side note: use either double quote or single quotes only, for tidiness sake

Laravel 4: Error: Popover requires tooltip.js

I am using Laravel-4-Bootstrap-Starter-Site. I have this issue loading javascript files: Error: Popover requires tooltip.js It seems that is not causing majors problems but I am losing functionality.
Checking source code we can see that popover is loaded first and before than tooltip file.
<!-- Javascripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/popover-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tab-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/alert-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/transition-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/modal-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/scrollspy-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/carousel-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/dropdown-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/tooltip-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/collapse-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/button-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/4e833b1b206008719982ee4bd4edd6f2/affix-49fe37fdd6b1d004e71a46c3650d6e3b.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/wysihtml5-0.3.0-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/wysihtml5/bootstrap-wysihtml5-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables-bootstrap-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/datatables.fnReloadAjax-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.colorbox-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/prettify-5f4b6ad2a53f7fc45751886caf6076e2.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/jquery.uploadfile-88e9f41770fc597c379b2a75086bcb0f.js"></script>
<script src="http://code.dev/assets/compiled/admin/assets/js/common-75a4c5198cfe0c4468991a6000253513.js"></script>
<script type="text/javascript">
$('.wysihtml5').wysihtml5();
$(prettyPrint);
</script>
Question: is there a way to solve this issue?
I have had the same problem. The reason that happens is because basset loads the resources in order by name. and since p comes before t obviously it gets loaded afterwards coming up with the error. Hacking your way around the problem simply rename tooltip with to atolltip in vendors/twbs/bootstrap/js or instead requiring the directory to load the files in basset config you require each single js file in the order you want. The second option i did not test but should work.

JavaScript files inclusion in specific order

I have some JavaScript files that i want to include in my application in such order that these following 3 files
<script src="lib/angular.js"></script>
<script src="lib/jquery-mobile-angular-adapter.js"></script>
<script src="lib/custom.js"></script>
always execute after these 6
<script src="lib/jquery.js"></script>
<script src="lib/jquery.mobile.js"></script>
<script src="lib/custom1.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script type="text/javascript" src="lib/DBData/InMemoryProvider.js"></script>
<script src="lib/DBData/SpookyHealthEntities.js"></script>
currently i am doing like this
<script src="lib/jquery.js"></script>
<script src="lib/jquery.mobile.js"></script>
<script src="lib/custom1.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script type="text/javascript" src="lib/DBData/InMemoryProvider.js"></script>
<script src="lib/DBData/SpookyHealthEntities.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/jquery-mobile-angular-adapter.js"></script>
<script src="lib/custom.js"></script>
But in this way last 3 executes before the first completes so i am getting error because in last 3 files my some code have to execute once the first 6 complete there whole execution
What I would suggest is to use include mechanism to include all the dependent files from the parent file. This way you can be certain of the loading as you want it to.
for example if a is dependent upon b and b on c, you will do the following.
Add include statement at the top of a for b and in b, an included statement for c.
Hope it helps.

Multiple JavaScript Issue

I include the following in my header
<!-- scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="./js/script.js"></script>
<script type="text/javascript" src="./js/jquery.infinitecarousel.js"></script>
<script type="text/javascript" src="./js/news.ticker.js"></script>
<script type="text/javascript" src="./js/jquery.autogrowtextarea.js"></script>
but the autogrowtextarea dont work if the script.js,jquery.infinitecarousel.js and news.ticker.js are included, but if i remove those three lines my autogrow textbox function work, why can this be. thanks
That means that something in one or all of those scripts is masking or breaking the functionality, or something on which it depends. Try not including the scripts one by one; isolate which one causes the break. Then look for duplicate definitions. Also, make sure that the scripts are included in the right order if there are any dependencies.
Try to put <script type="text/javascript" src="./js/jquery.autogrowtextarea.js"></script> next to the include of jquery and before the other ones and test if works. Maybe you have dependencies in the other files (script.js)

Try Sencha Touch examples locally

Can one download the source code and try out the examples for local testing . E.g. I am trying to preview the example on my iPad (after downloading locally), but am unable to see anything;
http://dev.sencha.com/deploy/touch/examples/oreilly/
I know for commecrial use, we need to pay, But just need to try it out first...
Actually as far as I understand, you don't need to pay for commercial use either for Sencha Touch. If you want a support plan, then you need to pay, otherwise the license is free (See the top of [the pricing page][1] which says "Free license!".
To view the examples:
Download the source code from http://www.sencha.com/products/touch/download/1.1.0/
Unzip the file (e.g. /home/username/sencha-touch-1.1.0)
Open a browser (Safari or Chrome only) and go to
file:///home/username/sencha-touch-1.1.0/examples/oreilly/index.html
If you want to navigate any other examples, point your browser to:
file:///home/username/sencha-touch-1.1.0/examples/
Right click on the page > View Page Source > On the top you'll see the script files >
<script type="text/javascript" src="../../sencha-touch.js"></script>
<!-- <script type="text/javascript" src="oreilly-all.js"></script> -->
<!-- Application JS -->
<script type="text/javascript" src="src/index.js"></script>
<script type="text/javascript" src="src/Models.js"></script>
<script type="text/javascript" src="src/App.js"></script>
<script type="text/javascript" src="src/SessionList.js"></script>
<script type="text/javascript" src="src/SpeakerList.js"></script>
<script type="text/javascript" src="src/HtmlPage.js"></script>
<script type="text/javascript" src="src/SpeakerDetail.js"></script>
<script type="text/javascript" src="src/SessionDetail.js"></script>
<script type="text/javascript" src="src/LocationMap.js"></script>
<script type="text/javascript" src="src/AboutList.js"></script>
<script type="text/javascript" src="src/VideoList.js"></script>
<script type="text/javascript" src="src/TweetList.js"></script>
You need to basically download these one by one and then reference them manually in your local html file which you'll need to test.
That's the way to actually access the examples. However I would prefer you go through their screencasts, you'll get the source code for them easily from github.
e.g. For this screen cast: http://vimeo.com/15672696 , you can get the source from https://github.com/nelstrom/GeoTweets

Categories

Resources