在grails中使用webshim

Question

我在grails中运行webshims有很多问题。我认为问题在于，当我将polyfiller.js文件包含在.gsp页面中时，polyfiller.js无法访问库中的任何其他js文件.有人知道附近有什么工作吗？整个库可以放在一个文件中吗?所以我只在.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将模块组合成一个文件，所以所有的文件都包含在bundle-bundle_IE6_8_ .js ..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

如果填充物找不到脚本，则可以配置shims基本路径。在你打电话给webshims.polyfill之前。

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

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

Answer 2

我建议您将webshims管理的所有资源排除在grails资源管理之外。

在你的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模块中，只放置基本的更新器和polifill文件，而不是其他资源。

Answer 3

也许我遗漏了一些关于您的完整问题，但我解决了找到脚本的问题，只需将shims目录放入grails目录中的web-app/js文件夹中即可。

然后，我按照Alexander的建议，以这种方式配置了它：

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