HTML5 Boilerplate with RequireJS (continuous update), html5boilerplate

HTML5 Boilerplate with RequireJS (continuous update), html5boilerplate
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
  • Further Read

Code base: HTML5 Boilerplate

DownloadHtml5-boilerplate_v5.0.0.zipFrom HTML5 Boilerplate. And put files in yourPublicFolder.

You will see files:

user@host:public$ tree.├── 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.png5 directories, 24 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 onlyOnePageIndex.htmlWith entranceJs/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 besidesJs/main. jsAsJs/require. js.

Then change<script src="js/main.js"></script>To<script src="js/require.js" data-main="js/main"></script>InIndex.htmlWeb page.

        <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 insertRequirejs. config (configs)In entrance codeJs/main. js.

/* file: js/main.js *//** * RequireJS configuration **/requirejs.config({  baseUrl: 'js'});/** * Entrance **/require([], function(){  alert( "Hello, world." );});

In China, before browserIndex.html, Think you need to remove Google and Google Ad related codes out of it. This will avoid network pending.

Then browser your site and you will get"Hello, world ."As alert message.

Multiple pages

When there are more than one web page is going to develop. We need some configures.

• Extractrequirejs.config()
• MorePageXXXX.htmlWhich based on copyIndex.html
• Entrance code inJs/pageXXXXFolderJs/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 inJs/common. jsFile.

/* file: js/common.js */requirejs.config({  baseUrl: 'js'});/****************** SAMPLE ******************requirejs.config({  baseUrl: 'js',  shim: {    jquery: {      exports: 'jQuery'    },    underscore: {      exports: '_'    },    backbone: {      deps: [ 'underscore', 'jquery' ],      exports: 'Backbone'    },    backboneLocalstorage: {      deps: [ 'backbone' ],      exports: 'Store'    }  },  paths: {    modernizr: 'vendor/modernizr-2.8.3.min',    jquery: 'vendor/jquery-1.11.2.min',    underscore: 'vendor/underscore',    backbone: 'vendor/backbone-min',    backboneLocalstorage: 'vendor/backbone.localStorage-min',    text: 'vendor/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(){require([], function(){  alert( "Hello, world." );});});  // js/common.js loader

+ Page1.html

Actually, dependencies or other shared configures inJs/common. jsCan work inPageXXXX.htmlWell, by loading it before main logic.

+ I18n (RequireJS Plugin)

See RequireJS i18n bundle API can help more.

Install

DownloadI18n. jsAnd put besidesJs/main. jsAsJs/i18n. js.

Configure

It is suggest thatNlsFolder shocould locate besides page entrance codes, for exampleJs/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": "Hello, world. "});

Update js/common. js

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

Browser Home page

"Hello, world !" Will be in alert messageJs/common. jsConfiguresLocaleIs"Zh-cn".

Further Read

• HTML5 Boilerplate

  • HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100 s of developers, all in one little package.

• RequireJS API

  • Learn how to configure
  • Learn how to create a Module
  • Learn how to use a Module
  • Learn how to create a Plugin
  • Learn how to use a Plugin

• A list of plugins (RequireJS)

• TodoMVC-Backbone + RequireJS

  • After configure with Backbone, you may need this example to learn Backbone with RequireJS.