I am not sure if it is possible or not.
I have a bunch of javascript files, all are dependent on each other.
I want to bundle all of them but I can't add require and module.exports in every file since they are so many files.
So my question is, can I bundle all these files while keeping the dependencies intact.
This is how my HTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<meta http-equiv="Expires" content="3600">
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3D BAT</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/w2ui-1.5.rc1.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/jspanel.css" rel="stylesheet" type="text/css">
<script src="js/lib/three.js"></script>
<script src="js/lib/controls/MapControls.js"></script>
<script type="text/javascript" src="js/lib/renderer/CSS2DRenderer.js"></script>
<script src="js/lib/jquery-2.2.4.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/raphael.js"></script>
<script src="js/lib/Toast.js"></script>
<script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/WebGL.js"></script>
<link href="css/main.css" rel="stylesheet">
<link href="css/label_tool.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="wrapper">
<div id="label-tool-wrapper"></div>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/SceneUtils.js"></script>
<script src="js/lib/PCDLoader.js"></script>
<script src="js/lib/OBJLoader.js"></script>
<script src="js/lib/controls/OrbitControls.js"></script>
<script src="js/lib/controls/TransformControls.js"></script>
<script src='js/lib/controls/PointerLockControls.js'></script>
<script src='js/lib/controls/KeyboardState.js'></script>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/Detector.js"></script>
<script src="js/lib/stats.min.js"></script>
<script src='js/lib/dat.gui.js'></script>
<script src='js/lib/Projector.js'></script>
<script type="text/javascript" src="node_modules/jszip/dist/jszip.js"></script>
<script type="text/javascript" src="node_modules/file-saver/dist/FileSaver.js"></script>
<script src="js/lib/html2canvas.js?ver=1.0"></script>
<script src="js/lib/base64-binary.js?ver=1.0"></script>
<script src="js/util/math.js?ver=1.0"></script>
<script src='js/util/classesBoundingBox.js?ver=1.0'></script>
<script src='js/util/boundingbox.js?ver=1.0'></script>
<script src='js/base_label_tool.js?ver=1.0'></script>
<script src='js/pcd_label_tool.js?ver=1.0'></script>
<script src="js/image_label_tool.js?ver=1.0"></script>
<script src='js/util/ajax_wrapper.js?ver=1.0'></script>
<script src='js/lib/w2ui-1.5.rc1.min.js?ver=1.0'></script>
<script src="node_modules/dragscroll/dragscroll.js"></script>
</div>
<div class="frame-selector">
<div class="current">1/900</div>
<div class="list-wrapper">
<div class="frame-selector__frames"></div>
</div>
</div>
<img id="left-btn" src="assets/textures/left.png" onClick="labelTool.previousFrame()" alt="left"/>
<img id="right-btn" src="assets/textures/right.png" onClick="labelTool.nextFrame()" alt="right"/>
<div id="time-elapsed"></div>
<ul class="toasts"></ul>
</body>
<script type="text/javascript">
labelTool.start();
</script>
</html>
in the above code script tag order is important since files are dependent on each other.
Can I bundle all these files into one without making any change into the current js files?
If the JS is written to certain standards, you can just combine them into to a single file with simple concatenation (e.g. with the standard unix tool [cat].)
This is quite fragile though, since semicolon insertion rules can break things when you just stick two JS files together.
e.g. if you have a couple of files that use IIFEs to scope variables, then putting them next to each other will cause the parenthesis around the second to act as a function call containing arguments for the first.
So you need a tool to do this. Last time I had cause to build a system in JS that didn't use Node.js or ES6 modules I used UglifyJS which can take care of that problem (while also shrinking the file size of the JS).
uglifyjs input.js other-input.js more-input.js --output combined.js -c
Related
I have this VERY simple line of code. I am just starting in doing some Javascript coding but I cannot make this work. Can you please tell me why?
<html>
<head>
<script src="bootstrap.min.js"></script>
<title>My Website</title>
</head>
<body>
<p>This is an example of a paragraph.</p>
<button type="button" class="btn btn-danger">Danger daw!</button>
</body>
</html>
The bootstrap is not appearing on the page.
Bootsrap has Javascript, CSS and an optional theme. From the Getting Started link on the bootstrap site you have the following code which will include them all for you.
If you are hosting the files yourself, just update the paths to the files.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Add this beetween your head tags:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
You should include css file path, here i used BootstrapCDN. And try to learn about bootstrap from here . I hope this is helpful.
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<title>My Website</title>
</head>
<body>
<p>This is an example of a paragraph.</p>
<button type="button" class="btn btn-danger">Danger daw!</button>
</body>
</html>
U miss incldue CSS.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Bootstrap requires jquery as a dependency.
Use the following code as suggested by rdn87
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap</h1>
<p>Text goes here</p>
</div>
</body>
</html>
I got a little problem with jQuery here.
Basically, I include my pages in the index.php page. However, SOME jQuery is not working, while others are okay. All scripts used in all pages are loaded in the tag of index.php.
<head>
<meta charset="utf-8">
<title>Shy Shop</title>
<!--js-->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/light_box.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){jQuery(".inline").colorbox({inline:true, width:"50%"});});
</script>
<!--end js-->
<!-- Mobile Specific Metas ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS ================================================== -->
<link rel="shortcut icon" href="Images/icons/favicon.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/ddsmoothmenu.css"/>
<link rel="stylesheet" href="css/elastislide.css"/>
<link rel="stylesheet" href="css/home_flexslider.css"/>
<link rel="stylesheet" href="css/light_box.css"/>
<link href="../../../html5shiv.googlecode.com/svn/trunk/html5.js">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
And this is how I include the rest of the files in index.php.
<?php
if(!isset($_REQUEST['pg']))
{
$pg = "home";
}
else
$pg = $_REQUEST['pg'];
if($pg=="shopguide")
include("faqs.php");
elseif($pg=="aboutus")
include("aboutus.php");
elseif($pg=="contactus")
include("contactus.php");
elseif($pg=="home")
include("home.php");
elseif($pg=="shop")
include("shop.php");
elseif($pg=="sitemap")
include("sitemap.php");
elseif($pg=="product")
include("product.php");
elseif($pg=="shoppingcart")
include("shoppingcart.php");
elseif($pg=="profile")
include("account.php");
elseif($pg=="orders")
include("orders.php");
elseif($pg=="wishlist")
include("mywishlist.php");
elseif($pg=="changepassword")
include("changepassword.php");
elseif($pg=="newmessage")
include("newmessage.php");
elseif($pg=="receivedmessages")
include("receivedmessages.php");
elseif($pg=="ordersummary")
include("ordersummary.php");
elseif($pg=="test")
include("test.php");
elseif($pg=="viewmessage")
include("viewmessage.php");
elseif($pg=="register")
include("register.php");
elseif($pg=="login")
include("login.php");
elseif($pg=="reseller")
include("reseller.php");
elseif($pg=="myaccount")
include("orders.php");
?>
An example of a working js in the included files is the jcarousel.min.js.
The accordion.js and light_box.js does not work with the included files, but they work when they are used in a single file.
Console says: Uncaught TypeError: undefined is not a function.
This issue may happen when you have same plugin/jquery files included
in other php files too. e.g. in index.php, you have some JS files, you
are including other PHP files which may also have same JS again. In
such cases, jQuery behaves like this. To check this, just check the
view source of generated html.
I visited Eyecon and downloaded the datepicker. I got three folders. 'css', 'js' and 'less'. I have included the bootstrap-datepicker.js and the latest jquery.js and linked the .css in the head:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../css/datepicker.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-responsive.css">
</head>
<body>
<div class="well">
<!--What should I enter here and where/how do I call the function?-->
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>
As one can see, I'm already working with the bootstrap library and have therefore also included that.
My question now is: how do I implement and call the date picker function?
$('element').datepicker(); where element is some class, id etc.
http://jsfiddle.net/6kk3k/1/
HTML
<input type="text" class="datepicker">
jQuery
$('.datepicker').datepicker();
I created default ASP.NET MVC 3 web application. Then I added three css and three js files to \Views\Shared_Layout.cshtml view:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet1.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/StyleSheet2.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/JScript2.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="header">
....
when I run the application, I html code is
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet1.css" rel="stylesheet" type="text/css" />
<link href="/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/JScript1.js" type="text/javascript"></script>
<script src="/Scripts/JScript2.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
Is it possible to have a handler in MVC to change my output html to like:
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<script src="js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js" type="text/javascript"></script>
<link href="css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
So the link js.axd=/Scripts/jquery-1.5.1.min.js,/Scripts/JScript1.js,/Scripts/JScript2.js
will return content of all these js files to the browser, and link css.axd=/Content/Site.css,/Content/StyleSheet1.css,/Content/StyleSheet2.css will return content of all css files.
I did something before in ASP.NET by IHttpHandler, but can't figure out how to do that in MVC, since I'm just starter in MVC.
Any help and code samples will appreciate.
Thank you!
You can use bundle and minification nuget package. Bundling and Minification
At the NuGet console type: "Install-Package Microsoft.AspNet.Web.Optimization"
Example here:
Using Web Optimization with MVC 3
I use cassette in my own projects. Also, this list here contains top 20 in Nuget.
I'm just posting my entire page to prevent confusion. I've stared at each link and checked the folder for the files. it all seems to be there. what's not working? very frustrated, could use a fresh pair of eyes. all my page displays is the content of the pre, but without any formatting. again, thanks for the help
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--SYNTAX HIGHLIGHTER-->
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript" src="shBrushPhp.js"></script>
<!--JQUERY and PROCESSING SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<script type="text/javascript">
SyntaxHighlighter.HighlightAll();
</script>
</body>
</html>
Four things:
SYNTAX HIGHLIGHTER - put the .js files AFTER the jquery, jQueryUI, etc. scripts. The order is important!
use $(document).ready to make sure that all the js files are loaded before the body content tries to use it.
Are you using firebug or some such tool to check for script errors in the browser?
Are you getting any errors at all or just not seeing the highlighting effect?
By replacing:
SyntaxHighlighter.HighlightAll();
with
SyntaxHighlighter.all();
your sample code works for me.