在grails中使用webshim

我在grails中運行webshims有很多問題。我相信問題是，當我在.gsp頁面中包含polyfiller.js文件時，polyfiller.js無法訪問庫中的任何其他js文件......是否有人知道解決方法？整個庫可以在一個文件中，所以我只在.gsp中包含一個文件，所以沒有訪問問題。在grails中使用webshim

在GSP

....

 <r:require module="IE6_8"/> 
    <r:layoutResources /> 
    <script> 
     $.webshims.polyfill('forms'); 
     $(function(){ 
    }); 
     </script>

IE6_8是包括所有在目錄中的JS文件的模塊，但仍然無法正常工作......

IE6_8模塊：

IE6_8{ 
    resource url: 'js/js-webshim/dev/extras/modernizr-custom.js' 
    resource url: 'js/js-webshim/dev/extras/mousepress.js' 
    resource url: 'js/js-webshim/dev/polyfiller.js' 
    resource url: 'js/js-webshim/dev/shims/color-picker.js' 
    resource url: 'js/js-webshim/dev/shims/combos/1.js' 
    resource url: 'js/js-webshim/dev/shims/combos/10.js' 
    resource url: 'js/js-webshim/dev/shims/combos/11.js' 
    resource url: 'js/js-webshim/dev/shims/combos/12.js' 
    resource url: 'js/js-webshim/dev/shims/combos/13.js' 
    resource url: 'js/js-webshim/dev/shims/combos/14.js' 
    resource url: 'js/js-webshim/dev/shims/combos/15.js' 
    resource url: 'js/js-webshim/dev/shims/combos/16.js' 
    resource url: 'js/js-webshim/dev/shims/combos/17.js' 
    resource url: 'js/js-webshim/dev/shims/combos/18.js' 
    resource url: 'js/js-webshim/dev/shims/combos/19.js' 
    resource url: 'js/js-webshim/dev/shims/combos/2.js' 
    resource url: 'js/js-webshim/dev/shims/combos/20.js' 
    resource url: 'js/js-webshim/dev/shims/combos/21.js' 
    resource url: 'js/js-webshim/dev/shims/combos/22.js' 
    resource url: 'js/js-webshim/dev/shims/combos/23.js' 
    resource url: 'js/js-webshim/dev/shims/combos/24.js' 
    resource url: 'js/js-webshim/dev/shims/combos/25.js' 
    resource url: 'js/js-webshim/dev/shims/combos/26.js' 
    resource url: 'js/js-webshim/dev/shims/combos/27.js' 
    resource url: 'js/js-webshim/dev/shims/combos/28.js' 
    resource url: 'js/js-webshim/dev/shims/combos/29.js' 
    resource url: 'js/js-webshim/dev/shims/combos/3.js' 
    resource url: 'js/js-webshim/dev/shims/combos/30.js' 
    resource url: 'js/js-webshim/dev/shims/combos/31.js' 
    resource url: 'js/js-webshim/dev/shims/combos/4.js' 
    resource url: 'js/js-webshim/dev/shims/combos/5.js' 
    resource url: 'js/js-webshim/dev/shims/combos/6.js' 
    resource url: 'js/js-webshim/dev/shims/combos/7.js' 
    resource url: 'js/js-webshim/dev/shims/combos/8.js' 
    resource url: 'js/js-webshim/dev/shims/combos/9.js' 
    resource url: 'js/js-webshim/dev/shims/details.js' 
    resource url: 'js/js-webshim/dev/shims/dom-extend.js' 
    resource url: 'js/js-webshim/dev/shims/es5.js' 
    resource url: 'js/js-webshim/dev/shims/excanvas.js' 
    resource url: 'js/js-webshim/dev/shims/filereader.js' 
    resource url: 'js/js-webshim/dev/shims/FlashCanvas/canvas2png.js' 
    resource url: 'js/js-webshim/dev/shims/FlashCanvas/flashcanvas.js' 
    resource url: 'js/js-webshim/dev/shims/FlashCanvasPro/canvas2png.js' 
    resource url: 'js/js-webshim/dev/shims/FlashCanvasPro/flashcanvas.js' 
    resource url: 'js/js-webshim/dev/shims/form-core.js' 
    resource url: 'js/js-webshim/dev/shims/form-datalist-lazy.js' 
    resource url: 'js/js-webshim/dev/shims/form-datalist.js' 
    resource url: 'js/js-webshim/dev/shims/form-message.js' 
    resource url: 'js/js-webshim/dev/shims/form-native-extend.js' 
    resource url: 'js/js-webshim/dev/shims/form-number-date-api.js' 
    resource url: 'js/js-webshim/dev/shims/form-number-date-ui.js' 
    resource url: 'js/js-webshim/dev/shims/form-shim-extend.js' 
    resource url: 'js/js-webshim/dev/shims/form-validation.js' 
    resource url: 'js/js-webshim/dev/shims/form-validators.js' 
    resource url: 'js/js-webshim/dev/shims/forms-picker.js' 
    resource url: 'js/js-webshim/dev/shims/geolocation.js' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/AlphaBar.png' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/bar-opacity.png' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/Bars.png' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/map-opacity.png' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/mappoint.gif' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/Maps.png' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/NoColor.png' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/picker.gif' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/preview-opacity.png' 
    resource url: 'js/js-webshim/dev/shims/jpicker/images/rangearrows.gif' 
    resource url: 'js/js-webshim/dev/shims/jpicker/jpicker.css' 
    resource url: 'js/js-webshim/dev/shims/json-storage.js' 
    resource url: 'js/js-webshim/dev/shims/mediaelement-core.js' 
    resource url: 'js/js-webshim/dev/shims/mediaelement-jaris.js' 
    resource url: 'js/js-webshim/dev/shims/mediaelement-native-fix.js' 
    resource url: 'js/js-webshim/dev/shims/mediaelement-yt.js' 
    resource url: 'js/js-webshim/dev/shims/range-ui.js' 
    resource url: 'js/js-webshim/dev/shims/styles/details-arrows.png' 
    resource url: 'js/js-webshim/dev/shims/styles/forms.png' 
    resource url: 'js/js-webshim/dev/shims/styles/polyfill-loader.gif' 
    resource url: 'js/js-webshim/dev/shims/styles/range-track.png' 
    resource url: 'js/js-webshim/dev/shims/styles/shim.css' 
    resource url: 'js/js-webshim/dev/shims/styles/vertical-range.png' 
    resource url: 'js/js-webshim/dev/shims/swfmini.js' 
    resource url: 'js/js-webshim/dev/shims/track-ui.js' 
    resource url: 'js/js-webshim/dev/shims/track.js' 

}

JavaScript控制檯與此迴應：

Uncaught TypeError: Cannot call method 'polyfill' of undefined auth:43 
    can't find module: color-picker bundle-bundle_IE6_8_defer.js:1222 
    18 extendNative configuration will be set to false by default with next release. In case you rely on it set it to 'true' otherwise to 'false'. See http://bit.ly/16OOTQO bundle-bundle_IE6_8_defer.js:1222 
    can't find module: form-datalist-lazy bundle-bundle_IE6_8_defer.js:1222 
    form-validators already included. please remove custom-validity.js bundle-bundle_IE6_8_defer.js:1222 
    can't find module: forms-picker bundle-bundle_IE6_8_defer.js:1222 
    can't find module: mediaelement-native-fix bundle-bundle_IE6_8_defer.js:1222 
    can't find module: mediaelement-yt bundle-bundle_IE6_8_defer.js:1222 
    Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/AppName/static/shims/styles/shim.css

由於Grails的模塊組合成一個文件，所有的.js文件都包含在捆綁-bundle_IE6_8_defer.js

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Login</title> 
      <script src="/AppName/static/plugins/jquery-1.8.3/js/jquery/jquery-1.8.3.min.js" type="text/javascript" ></script> 
      <link href="/AppName/static/bundle-APPStyleSheet_head.css" type="text/css" rel="stylesheet" media="screen, projection" /> 
      <script src="/AppName/static/bundle-bundle_IE6_8_head.js" type="text/javascript" ></script> 

      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/AlphaBar.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/bar-opacity.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/Bars.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/map-opacity.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/mappoint.gif" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/Maps.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/NoColor.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/picker.gif" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/preview-opacity.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/rangearrows.gif" rel="shortcut icon" /> 
      <link href="/AppName/static/bundle-bundle_IE6_8_head.css" type="text/css" rel="stylesheet" media="screen, projection" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/styles/details-arrows.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/styles/forms.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/styles/polyfill-loader.gif" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/styles/range-track.png" rel="shortcut icon" /> 
      <link href="/AppName/static/js/js-webshim/dev/shims/styles/vertical-range.png" rel="shortcut icon" /> 


      <script> 
       $.webshims.setOptions({ basePath: "/js/js-webshim/dev/shims" }); 
       $.webshims.polyfill('forms');  
       $(function(){ }); 
      </script>  

</head>

來源

2013-07-02 Brandon Wagner

請張貼IE6_8模塊的聲明和最終頁面的HTML輸出。 –

我編輯了更多的信息，任何想法的初始職位？ –

如果polyfiller沒有找到腳本，您可以配置墊片基本路徑。在調用webshims.polyfill之前。

$.webshims.setOptions({ basePath: "/yourFolderTo/shims/" }); 
$.webshims.polyfill('forms');

只要看着你的開發人員工具的淨標籤以確保，該腳本發現和基本路徑配置正確。

來源

2013-07-02 09:29:29

我現在的問題是設置路徑到什麼地方？運行時，Grails會重新排列文件。 –

我不能完全告訴你這一點。這更像是一個Grails問題。通過上面的代碼，您可以爲webshims指定基本路徑。但我無法分辨Grails放置這些文件的位置。 –

我建議你排除Grails的資源管理

通過webshims管理在您的Config.groovy中的所有資源把這樣的事情

def excludeAll = [ 'js/js-webshim/dev/shims/combos/1.jsjs/js-webshim/dev/shims/combos/10.js', 'js/js-webshim/dev/extras/mousepress.js', ... ] 
grails.resources.mappers.yuicssminify.excludes = excludeAll 
grails.resources.mappers.yuijsminify.excludes = excludeAll 
grails.resources.mappers.hashandcache.excludes = excludeAll 
grails.resources.mappers.zip.excludes = excludeAll 
grails.resources.mappers.bundle.excludes = excludeAll 
grails.resources.mappers.csspreprocessor.excludes = excludeAll 
grails.resources.mappers.cssrewriter.excludes.excludes = excludeAll 
grails.resources.mappers.fontawesomeplugin.excludes = excludeAll 
grails.resources.mappers.baseurl.excludes = excludeAll

而且從IE6_8模塊移除資源。在IE6_8模塊中只放置了基本的modernizer和polifill文件，而不是其他資源。

來源

2013-07-02 13:30:04

這似乎是在正確的軌道上。我排除了polyfiller.js和modernizr-custom.js以外的所有文件。但是我在哪裏可以找到我排除的資源。我需要爲webshims設置一個basepath，就像上面的答案所暗示的那樣，但是我現在看不到文件存儲在哪裏。 –

這是我得到的js控制檯錯誤（如果指定正確的路徑，我假設可以修復）：加載資源失敗：服務器響應的狀態爲404（未找到）： \t http： //localhost:8080/AppName/static/shims/combos/1.js \t http：// localhost：8080/AppName/static/shims/styles/shim.css \t http：// localhost：8080/AppName/static/shims/dom-extend.js –

localhost：8080/AppName/static/shims/dom-extend.js - >表示您必須將文件放在路徑中：web-app/js/shims/dom-extend.js –

也許我失去了一些關於你的完整的問題，但我只是通過將墊片目錄到web應用程序/ JS文件夾中的Grails目錄解決找到腳本的問題。

然後我配置它，亞歷山大的建議，以這樣的方式

webshim.setOptions({basePath: "js/shims/" });

來源

2014-10-19 09:35:45 s1l3n0

在grails中使用webshim

回答

相關問題