html - 在 grails 中使用 webshim

Question

我在 grails 中运行 webshims 时遇到了很多问题。我相信问题是当我在我的 .gsp 页面中包含 polyfiller.js 文件时，polyfiller.js 无法访问库中的任何其他 js 文件......有人知道解决方法吗？整个库可以在一个文件中，所以我只在 .gsp 中包含一个文件，这样就不会出现访问问题。

在 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-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>

Answer 1

如果 polyfiller 没有找到脚本，您可以配置 shims 基本路径。在调用 webshims.polyfill 之前。

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

只需查看开发人员工具的 net 选项卡，以确保找到脚本并且正确配置了 basePath。