被leaflet和grunt聯合刨了個坑

問題描述

最近一直再用leaflet在作地圖相關的，leaflet是什麼？leaflet是一個輕量級的地圖客戶端，原本之前用google的javascript庫的，後來google被那啥了，才改用這個庫的，感受還蠻不錯的。grunt是一個很是優秀的構建工具，組成有Yeoman一套工具及，酷爆了。
在項目中引用了不少的js文件。
下面的是grunt編譯壓縮js代碼的標記，我只是照着人家的用而已。

<!--build:js xxxxxx-->
<!--endbuil-->

---

我引用的主要代碼以下

<!-- build:js scripts/components.min.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/leaflet/dist/leaflet.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- endbower -->
  <!-- endbuild -->

    <!-- build:js scripts/lmap.plugin.min.js -->
    <script src="scripts/L.TileLayer.A.js"></script>
    <script src="scripts/Control.MiniMap.js"></script>
    <script src="scripts/Leaflet.draw.js"></script>
    <script src="scripts/leaflet.layerindex.js"></script>
    <script src="scripts/json2.js"></script>
    <script src="scripts/rtree.js"></script>
    <script src="scripts/leaflet.ajax.js"></script>
    <!-- endbuild -->

我在我本身機器上測試徹底沒問題，而後我因爲當時須要急用，我草草的測試了一下，而後就

grunt build

把生成的那個dist文件夾發佈出去了。。。。
次日，我被上司批評了一大頓，由於我昨天發佈出去的站點有問題，執行到某個功能的時候就出錯了。我一看 出錯了都嚇傻了，各類猜想問題從哪裏出來的。

查錯

問題出來了我這是確定跑不掉的。firebug看一下錯出來哪裏，發現是adfsafa.components.min.js這個腳本拋出異常了Couldn't autodetect L.Icon.Default.imagePath, set it manually.我就想爲啥我在開發的時候毛線問題沒有，這壓縮打包發佈以後就給我出了這麼大的問題了，既然冤有頭，債有主，只能去找問題了。
看了一下leaflet的源代碼，
拋出異常的代碼段

function(name) {
            var key = name + 'Url';
            if (this.options[key]) {
                return this.options[key];
            }
            if (L.Browser.retina && name === 'icon') {
                name += '-2x';
            }
            var path = L.Icon.Default.imagePath;
            if (!path) {
                throw new Error('Couldn\'t autodetect L.Icon.Default.imagePath, set it manually.');
            }
            return path + '/marker-' + name + '.png';
        }

很明顯是path爲null才拋出異常，繼續找到L.Icon.Default.imagePath

L.Icon.Default.imagePath = (function() {
        var scripts = document.getElementsByTagName('script'),
            leafletRe = /[\/^]leaflet[\-\._]?([\w\-\._]*)\.js\??/;
        var i, len, src, matches, path;
        for (i = 0, len = scripts.length; i < len; i++) {
            src = scripts[i].src;
            matches = src.match(leafletRe);
            if (matches) {
                path = src.split(leafletRe)[0];
                return (path ? path + '/' : '') + 'images';
            }
        }
    }());

看了半天，發現這貨竟然是靠正則匹配名字包含leaflet***.js去得到一個文件路徑，從而給我返回一個path保守估計這個返回的是個空才引起異常拋出。固然也經過斷點調試的方法確認了問題就是這個就是由於沒匹配到東西才引起的血案。

grunt打包的時候，會把<!-- build:js scripts/lmap.plugin.min.js --><!--endbuild-->
代碼段合併在一塊兒並重命名一下。
問題就出在我壓縮後發佈後，script標籤匹配不到leaflet***.js，才引起了這個拋出異常致使個人代碼沒法繼續正常工做的血案。

應急解決

也沒時間去思考該怎麼完全解決這個問題，臨時解決一下了。我把leaflet的代碼加了一句

if (matches) {
                path = src.split(leafletRe)[0];
                return (path ? path + '/' : '') + 'images';
            }
    return '我該給他的路徑';

教訓

首先，解決這樣的問題的時候，原則上不該該去修改這個庫，而是先試着在個人代碼中去修正這個問題的影響，由於我項目依賴管理是依靠bower來作的，我這裏只是應急一下。
而後，我發佈代碼以後測試不夠充分，很明顯的問題由於倉促發布而沒發現，這固然是個人失職。（其實這問題是我如今遭遇的最大的問題，這個項目如今由我開發測試發佈，並且沒有文檔和明確的需求，又扯到僞需求的問題上去了）。
這個問題卻是讓我重視到了測試的重要性了，grunt徹底是正常使用，leaflet也是正常的使用，我也是按照套路在作開發，可是遇到一塊兒了就是給我出這個問題了。寫代碼的時候遇到坑其實不是咱們不當心引入的，而是上游之間可能出現衝突。