HTML5 boilerplate with Requirejs (continuous update)

HTML5 boilerplate with requirejstable of contents

• HTML5 boilerplate with Requirejs
  • Table of Contents
  • Code Base HTML5 Boilerplate
    • Code Base in Browser
  • Requirejs
    • Install
    • Configure
    • Multiple pages
      • Jscommonjs
      • Update Jsmainjs for indexhtml
      • Page1html
  • i18n Requirejs Plugin
    • Install
    • Configure
    • Usage
      • Update Jsmainjs
      • Jsnlsmainjs
      • Jsnlszh-cnmainjs
      • Update Jscommonjs
      • Browser Home Page

Code BASE:HTML5 Boilerplate

Download html5-boilerplate_v5.0.0.zip from HTML5 boilerplate. and put files in your public folder.

You'll see files:

404.html├── apple-touch-icon.png├── browserconfig.xml├── crossdomain.xml├── css│   ├── main.css│   └── normalize.css├── doc│   ├── css.md│   ├── extend.md│   ├── faq.md│   ├── html.md│   ├── js.md│   ├── misc.md│   ├── TOC.md│   └── usage.md├── favicon.ico├── humans.txt├── img├── index.html├── js│   ├── main.js│   ├── plugins.js│   └── vendor│       ├── jquery-1.11.2.min.js│       └── modernizr-2.8.3.min.js├── robots.txt├── tile.png└── tile-wide.png524 files

Code Base in Browser

Open your favorite HTML5 browser and access code base. Mine is http://centos.xiaoqiang.loc/.

+ Requirejs

We already have a code base which HTML5 boilerplate. In the code base, we have only one page index.html with entrance js/main.js. We are using the same code structure to support Requirejs.

Now let's add require.js in.

Install

Download Require.js (v2.1.16) and locate it besides Js/main.js as js/require.js.

Then change to in <script src="js/main.js"></script> index.html Web page. <script src="js/require.js" data-main="js/main"></script>

        <script>Window.jquery | | document.write (' <script src= ' js/vendor/jquery-1.11.2.min.js ' ><\/script> ' )</script>        <script src="Js/plugins.js"></script>        <!--<script src= "Js/main.js" ></script> -        <script src="Js/require.js" data-main="Js/main.js" ></script>

Configure

For single page support, we just inserts requirejs.config (configs) in entrance code js/main.js.

/* file: js/main.js *//** * RequireJS configuration **/requirejs.config({  ‘js‘});/** * Entrance **/requirefunction(){  "Hello, world." );});

Then browser your site and you'll get "Hello, World" as alert message.

Multiple pages

When there was more than one Web page was going to develop. We need some configures.

• Extractrequirejs.config()
• More pagexxxx.html which based on copy of index.html
• Entrance code in js/pagexxxx folder as js/pagexxxx/main.js.
  
  • This appointment helps to Identify:which page uses which entrance code and modules belongs to it

+ js/common.js

Put requirejs configuration in js/common.js file.

/* file:js/ Common.js */ Requirejs.config ({baseUrl:  ' js ' }); /****************** SAMPLE ******************requirejs.config ({baseUrl: ' js ', shim: {jqu Ery: {exports: ' jQuery '}, underscore: {exports: ' _ '}, Backbone: {deps: [' underscore ', ' JQ  Uery '], exports: ' Backbone '}, Backbonelocalstorage: {deps: [' Backbone '], exports: ' Store '} }, paths: {modernizr: ' Vendor/modernizr-2.8.3.min ', jquery: ' Vendor/jquery-1.11.2.min ', underscore: ' Vendor/und Erscore ', backbone: ' Vendor/backbone-min ', backbonelocalstorage: ' Vendor/backbone.localstorage-min ', text: ' Vendo   R/text '}, Map: {' * ': {' loadcss ': ' helpers/loadcss/wrapper '}, config: {' i18n ': {locale: ' ZH-CN '} }}); ******************/sample ******************/  

Update Js/main.jsFor index.html

/* file: js/main.js *//** * load js/common.js in each web page is required. */require‘common‘function(){requirefunction(){  "Hello, world." );});});  // js/common.js loader

+ page1.html

1. Now create page1.html by copying from index.html.
   
   • Changedata-main="js/page1/main.js"
2. Now create js/page1/main.js by copying from js/main.js.
   
   • Changerequire([ ‘../common‘ ], ...

Actually, dependencies or other GKFX configures in js/common.js can work in pagexxxx.html well, by L Oading it before main logic.

+ i18n (Requirejs Plugin)

See Requirejs i18n Bundle API can help more.

Install

Download i18n.js and put besides Js/main.js as js/i18n.js.

Configure

It is suggest this NLS folder should locate besides page entrance codes, for example js/nls/.

Usageupdate Js/main.js

/* file: js/main.js *//** * load js/common.js in each web page is required. */require‘common‘function(){require([  ‘i18n!nls/main‘  /* Use ./i18n.js to load `nls/main` locale files */function( main){  alert( main.helloworld );});});  // js/common.js loader

Then, create the following sample files.

+ js/nls/main.js

/* file: js/nls/main.js */define({  "root": {    "helloworld""Hello, world."  },  "zh-cn"true});

+ js/nls/zh-cn/main.js

/* file: js/nls/zh-cn/main.js */define({  "helloworld""你好，世界。"});

Update Js/common.js

/* file: js/common.js */requirejs.config({  baseUrl: ‘js‘,  config: {    ‘i18n‘: { locale: ‘zh-cn‘ }  }});

Browser Home Page

"Hello, world!" "'ll be in alert message as js/common.js configures locale is " ZH-CN ".

HTML5 boilerplate with Requirejs (continuous update)