javascript - Converting a Plain JQuery project to Require JS project -
i have developed jquery project multiple pages dozens of js scripts, things became unmanageable , i'm getting lost in thousands of lines of code. i'm cleaning , refactoring whole structure , i'd organize project require js.
basically pages depend on jquery.js, bootstrap.js, app.js
and each page depends on other specifics scripts (moment.js etc...)
let's have structure :
/ header.html (all css files etc..) footer.html (the global app.js file , other scripts : jquery / bootstrap etc...) page1.html (depends on app.js page2.html page3.html page4.html page5.html js / app.js require.js libs / jquery.js bootstrap.js moment.js knob.js fileuploader.js pages / page1.js (depends on jquery , bootstrap , moment.js) page2.js (depends on jquery , bootstrap , knob.js) page3.js (depends on jquery , bootstrap , fileuploader.js) etc... with header.html :
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//static.app.com/css/bootstrap.css" rel="stylesheet"> <link href="//static.app.com/css/bootstrap-select.css" rel="stylesheet"> <link href="//static.app.com/css/bootstrap-datepicker.min.css" rel="stylesheet"> <link href="//static.app.com/css/font-awesome.css" rel="stylesheet"> <link href="//static.app.com/css/style.css" rel="stylesheet"> </head> <body> .... and footer.html :
.... <!--<script src="//static.app.com/js/jquery.min.js"></script> <script src="//static.app.com/js/bootstrap.min.js"></script>--> <script data-main="//static.app.com/js/app.js" src="//static.app.com/js/require.js"></script> <!--<script src="//static.app.com/js/require.js"></script> <script src="//static.app.com/js/app.js"></script> <script src="//static.app.com/js/logic.js"></script>--> </body> and every page.html :
{{> header}} <div></div> .... {{> footer}} so want achieve load dynamically needed per page don't have include on footer.html.
i've started reading require , seems fits situation got lost in doc...
this i've done far :
require.config({ paths: { "jquery": "libs/jquery.min", "bootstrap": "libs/bootstrap.min" }, shim: { "jquery": { exports: "$" }, "bootstrap": { deps: ["jquery"] } } }); /*require(["jquery", "bootstrap"], function ($) { });*/ function hello () { alert("hello"); } but can see scripts put on paths being included.
could please, provide easy , simple sample of want achieve require.js ? thanks.
Comments
Post a Comment