Трудность получения прокрутки браузера с помощью grunt-browsify (> 2.0.2) в качестве преобразования

В версии 2.0.2 из grunt-browserify, browserify-shim был удален из самого модуля и преобразован для использования как transform, а не простой option в задачу grunt-browserify.

старая версия использования прокладки с grunt-browserify будет выглядеть так:

'libs-dev': {
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')],
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'),
    options: {
        shim: {
            angular: {
                path: path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js'),
                exports: 'angular'
            }
        }
    }
}

Это отлично работало и создало обертку вокруг модуля libs.js как таковой:

require=(function(e,t,n){function i(n,s){if(!t[n]){if(!e[n]){var o=typeof require=="function"&&require;if(!s&&o)return o(n,!0);if(r)return r(n,!0);throw new Error("Cannot find module '"+n+"'")}var u=t[n]={exports:{}};e[n][0].call(u.exports,function(t){var r=e[n][1][t];return i(r?r:t)},u,u.exports)}return t[n].exports}var r=typeof require=="function"&&require;for(var s=0;s<n.length;s++)i(n[s]);return i})({"angular":[function(require,module,exports){
    module.exports=require('i10PRm');
},{}],"i10PRm":[function(require,module,exports){
    (function(global){(function browserifyShim(module, exports, define, browserify_shim__define__module__export__) {
        browserify_shim__define__module__export__(typeof angular != "undefined" ? angular : window.angular);
    }).call(global, undefined, undefined, undefined, function defineExport(ex) { module.exports = ex; });
})(window)
},{}]},{},["i10PRm"]);

Однако, основываясь на (невероятно редкой и разочаровывающей) документации, новая версия прокладки внутри grunt-browserify используется как transform, как таковая:

'libs-dev': {
    src: [path.join('<%= config.dirs.browserLibs %>', 'angular', 'angular.js')],
    dest: path.join('<%= config.dirs.dest.dev %>', 'js', 'libs.js'),
    options: {
        transform: ['browserify-shim']
    }
}

и поскольку конфигурация browserify-shim теперь полностью основана на конфигурации package.json, мой package.json выглядит следующим образом:

"browser": {
    "angular": "./bower_components/angular/angular.js"
},
"browserify-shim": {
    "angular": "angular"
}

Однако это создает оболочку, которая выглядит так:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
    (function (global){
        __browserify_shim_require__=require;(function browserifyShim(module, exports, require, define, browserify_shim__define__module__export__) {
            browserify_shim__define__module__export__(typeof angular != "undefined" ? angular : window.angular);
    }).call(global, undefined, undefined, undefined, undefined, function defineExport(ex) { module.exports = ex; });
}).call(this,typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
},{}]},{},[1]);

Как вы можете видеть, что-то отсутствует в этой новой оболочке; похоже, не эквивалентен значению экспорта i10PRm, присвоенному старой оболочке. Предположительно, это означает, что я использую экспорт некорректно, хотя я следую за документами browserify-shim, и все это выглядит довольно просто.

Любить любую помощь или ясность в отношении новейших версий grunt-browserify (>= 2.0.2) и browserify-shim и как правильно их использовать.

Ответ 1

Просто обновление для потомков: я закончил покачать grunt-browserify и просто использовал browserify-shim с browserify из командной строки. Он работает мгновенно без каких-либо проблем.

Я пришел к убеждению, что комбинация из трех библиотек (browserify, grunt-browserify и browserify-shim) просто обновляется и изменяется слишком быстро, чтобы быть в состоянии полагаться на них, работающих вместе, как они обновляются. Отключение компонента grunt делает остальные два намного проще в управлении.

Создатель браузера-shim похоже, согласен:

... в моем опыте всякий раз, когда люди обертывают браузеру и браузеру-прокладку (оба из которых прекрасно настраиваются в package.json) внутри бегуна задач, они делают жизнь немного сложнее.

Ответ 2

Я тоже боролся с этой настройкой, но мне удалось заставить ее работать, полностью удалив настройки прокладки с моего Gruntfile.js и позволяя browserify обрабатывать их в package.json. Здесь я использую прокладку с jquery, вы также можете увидеть версии, которые у меня запущены ниже:

// portion of package.json

"browser": {
    "jquery": "./js/lib/jquery-1.11.0.min.js"
},
"browserify-shim": {
    "jquery": "$"
},
"browserify": {
    "transform": [
        "browserify-shim"
    ]
},
"devDependencies": {
    "grunt": "~0.4.1",
    "grunt-cli": "~0.1.10",
    "browserify": "~3.44.2",
    "browserify-shim": "~3.4.1",
    "grunt-browserify": "~2.0.8"
}

Соответствующая часть моего Gruntfile.js теперь выглядит следующим образом:

// portion of Gruntfile.js

browserify: {
    bundleOptions: {
        debug: true
    },
    src: 'js/src/main.js',
    dest: 'js/output.js'
},

grunt:browserify теперь работает как ожидалось, вызывая browserify, но позволяя ему обрабатывать browserify-shim самостоятельно.

Ответ 3

Не запустите прокрутку через grunt watch, это не отразит изменения, сделанные вами в середине.

Итак, всякий раз, когда вы меняете файл package.json, запустите задачу браузера на grunt broswerify