Introduction of text files (style and template) when using browserify

Modularity is now standard for web front-end development, and the mainstream is nothing more than the COMMONJS specification and AMD specifications

有人纳闷了，CMD呢？鸿星尔克之于美津浓，感受下，自家东西不表多

As an example of AMD's standard leader RequireJS , it provides requirejs-text plugins that allow developers to introduce text files asynchronously, such as:

require(["Some/module", "Text!some/module.html", "Text!some/module.css"],      function(Module,Html,Css) {       //the HTML variable would be the text       //of the some/module.html file       //the CSS Variable would be the text       //of the some/module.css file.    });

At this point we have got the argument string in the anonymous callback function html css , and the HTML template string can be innerHTML used, but the css string also needs to be inserted in order to style take effect, such as:

    ···        document.getElementsByTagName("style")[0].innerHTML = css;    ···

At this point, the three basic elements of a module (templates, styles, scripts) are fully loaded.

插一句， SeaJS同样使用插件实现了引入文本文件的功能`seajs-text`实现了加载模板字符串的功能，`seajs-css`实现了加载样式表字符串的功能`seajs-style`能够加载一个css文件，和link标签一样

So how is browserify to achieve the above function?

As the front-end commonjs of the darling, the current modular development of the absolute mainstream Browserify , with HTML5 the script new label Properties async , can be non-blocking loading module

需要注意的是：`async`属性一旦使用，就要考虑好`browserify`打包好的那些模块是否有依赖性，如果有依赖性，建议把这些依赖的模块打包为一个模块，不然async标示过的脚本是不会等待`DomReady`之后再执行的，这样很危险

Here will not describe Browserify the use of the scene and how to use, but to solve the specific introduction of the text file functionality, the default here is already aware of its simple use, unclear please go to the official website

BrowserifyThe use transform of the transform corresponding plug- in and matching implementation of the introduction of templates, styles and other text files function

And what is transform?

Transform source code before parsing it for require() calls with the transform function or module name tr

That is, before parsing the require call to transform the incoming source code, through this layer is similar to the functionality of the middleware , so that browserify the expansion of the promising

Note : in the project I am accustomed to use the CLI, with the watchify mating plug-in transform , to achieve real-time conversion and compilation

How to introduce a template file

The three transform plugins I've used can be implemented:

• Stringify
• Html2js-browserify
• Browserify-compile-templates (Limit the template engine you use as underscore template, put a separate template into the same HTML static file, the script ID to separate calls, the flexibility is not recommended)
• Blissify (limited to the template engine you use for Biss, not recommended)

stringifyand html2js-browserify very similar, using the API is similar, mentioned together

Project in use:

    -S-dev browserify    -S-dev watchify     -S-dev stringify

Orhtml2js-browserify

    -S-dev browserify    -S-dev watchify     -S-dev html2js-browserify

Create a new html file and write the template you want to use (for Ejs example)

../templates/header.html

      <header>           <nav>               <span class="home"   > Home  </span>               <span class="user"> MyZone  </span> <% if (isamin) {%>  <span> welcome! <%= name%> Administer  <span> <%}%>  </nav>       </header> 

We can use it in our COMMONJS module.

../modules/header/header.js

    var$= require(' jquery ');    var_= require(' underscore ');    varTpl= require('. /.. /templates/header.html ');    varData= {Name: ' Turn two ', ISAdmin: true    };$('. Header ').HTML( _.template( Tpl)(Data));

The simplest command line (using wacthify additional monitoring features) is as follows:

    -t stringify header.-o header_bundle.js

Or

    -t html2js-browserify header.-o header_bundle.js

How to introduce a style file

• No preprocessor-compiled
  • Cssify
  • Browserify-css

Browserify-css

    -S-dev browserify    -S-dev watchify     -S-dev browserify-css

app.css:

    @import url("modules/foo/index.css");    @import url("modules/bar/index.css");    body {        background-color: #fff;    }

app.js:

    var=require(‘./app.css‘);    console.log(css);

If you add a parameter at compile time --autoInject=true , then the label of your HTML file head will be inserted style , otherwise you need to insert it manually

    -t browserify-[--autoInject=true] app.> bundle.js

Cssify

This plugin uses the most people, probably because the simplest

    -S-dev browserify    -S-dev watchify     -S-dev cssify

style.css:

    body {      background: pink;    }

app.js:

var=require(‘./style.css‘);console.log(styleNode);  

The Require style sheet is inserted into the label by default at compile time head

    -t cssify app.> bundle.js

• containing preprocessor-compiled
  • Node-lessify
  • Require-stylify

require-stylifyFor example, node-lessify very similar, but only compileless

    -S-dev browserify    -S-dev watchify     -S-dev require-stylify

app.js

    require(‘./less/main.less‘);    require(‘./sass/sassFile.scss‘);

The style sheet that was introduced after compilation will appear in the head label,

    -t require-stylify app.> bundle.js

When the style is actually compiled, the resulting CSS file exists directly in the same directory as the preprocessed file

That is./less/main.css./sass/sassfile.css

Above, personally feel that although the characteristics of the asynchronous module has been lost, but as a modern modular tool, Browserify with script the attributes of the label async , can be applied to the production environment, and the corresponding flexibility is higher, the community plug-in richer.

Thanks for reading

Sync from personal blog:http://www.gyroer.com

Introduction of text files (style and template) when using browserify