使用 Browserify 時引入文本文件（style和template）

目前來說模塊化已是Web前端開發的標配了,主流無非是CommonJS規範和AMD規範javascript

有人納悶了，CMD呢？鴻星爾克之於美津濃，感覺下，自家東西不表多

以AMD規範的翹楚 RequireJS 舉例，它提供了requirejs-text插件，使得開發者能夠異步地引入文本文件，如：php

require(["some/module", "text!some/module.html", "text!some/module.css"],  
    function(module, html, css) {
        //the html variable will be the text         //of the some/module.html file         //the css variable will be the text         //of the some/module.css file.     }
);

這時候咱們已經在匿名的回調函數中拿到了html和css的實參字符串，html的模板字符串能夠經過innerHTML使用，可是css字符串還須要插入進style才能生效，如：css

···

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

    ···

這時一個模塊的三個基本要素（模板、樣式、腳本）就加載齊全了。html

插一句， SeaJS一樣使用插件實現了引入文本文件的功能
`seajs-text`實現了加載模板字符串的功能，
`seajs-css`實現了加載樣式表字符串的功能
`seajs-style`可以加載一個css文件，和link標籤同樣

那麼Browserify是如何來實現以上功能的呢？

做爲前端CommonJS化的寵兒，目前模塊化開發的絕對主流Browserify，配合HTML5的script標籤新屬性async，能夠無阻塞的加載模塊前端

須要注意的是：`async`屬性一旦使用，就要考慮好`browserify`打包好的那些模塊是否有依賴性，若是有依賴性，建議把這些依賴的模塊打包爲一個模塊，否則async標示過的腳本是不會等待`DomReady`以後再執行的，這樣很危險

這裏不會介紹Browserify的使用場景以及怎麼使用，而是爲了解決特定的引入文本文件的功能，這裏默認你們已經知曉了它的簡單使用，不明請去官網查閱java

Browserify使用了transform以及配合transform的相應插件實現了引入模板、樣式等等文本文件的功能node

而transform又是什麼？

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

就是說，在解析require調用以前來轉換引入的源代碼，經過這一層相似於中間件的功能，使得browserify在拓展性上大有可爲python

注：在項目中我習慣使用CLI，用watchify配合transform插件，來實現實時轉化和編譯jquery

怎麼引入模板文件

我使用過的三個transform插件能夠實現：git

stringify
html2js-browserify
browserify-compile-templates （限定了你使用的模板引擎爲Underscore Template，把單獨模板放到同一html靜態文件，中，經過script的ID來分別調用，靈活性欠妥，不推薦）
blissify （限定了你使用的模板引擎爲Biss，不推薦）

stringify和html2js-browserify很是相似，使用API也相似，一塊兒說起

項目使用中：

npm install -S-dev browserify
    npm install -S-dev watchify 
    npm install -S-dev stringify

或者html2js-browserify

npm install -S-dev browserify
    npm install -S-dev watchify 
    npm install -S-dev html2js-browserify

新建html文件，編寫須要使用的模板（以Ejs舉例）

../templates/header.html

<header>
        <nav>
            <span class="home">Home</span>
            <span class="user">MyZone</span>
            <% if (isAmin) { %>
                <span>
                    Welcome! <%= name %> administer
                <span>
            <% } %>
        </nav>
    </header>

在咱們的CommonJS模塊裏就能夠使用了

../modules/header/header.js

var $ = require('jquery');
    var _ = require('underscore');
    var tpl = require('../../templates/header.html');

    var data = {
        name: '轉二'，
        isAdmin: true
    };

    $('.header').html(_.template(tpl)(data));

最簡單的命令行（使用wacthify附加監視功能）以下：

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

或者

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

怎麼引入樣式文件

無預處理器編譯的
- cssify
- browserify-css

browserify-css

npm install -S-dev browserify
    npm install -S-dev watchify 
    npm install -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 css = require('./app.css');
    console.log(css);

編譯時若是添加參數 --autoInject=true，那麼你的HTML文件的head標籤將被插入style，不然須要你手動插入

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

cssify

這個插件使用的人最多，多是由於最簡單

npm install -S-dev browserify
    npm install -S-dev watchify 
    npm install -S-dev cssify

style.css:

body {
      background: pink;
    }

app.js:

var styleNode = require('./style.css');

console.log(styleNode);

編譯時默認將require的樣式表插入head標籤

watchify -t cssify app.js > bundle.js

包含預處理器編譯的
- node-lessify
- require-stylify

以require-stylify爲例，node-lessify很相似，可是隻能編譯less

npm install -S-dev browserify
    npm install -S-dev watchify 
    npm install -S-dev require-stylify

app.js

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

編譯後被引入的樣式表就會出如今head標籤中了，

watchify -t require-stylify app.js > bundle.js

實際上樣式被編譯後，生成的css文件直接存在於預處理文件的同目錄下

即 ./less/main.css ./sass/sassFile.css

以上，我的以爲雖然失去了異步模塊的特性，可是做爲現代模塊工具，Browserify配合script標籤的async屬性，徹底能夠適用於生產環境，並且相應靈活性更高，社區的插件更豐富。

感謝閱讀

同步自我的博客：http://www.gyroer.com