browserify-shim Sortierbar global wird von react-sortable-mixin nicht erkannt

Question

Ich habe ein Problem, wo react-sortable-mixin die browserify-shim global nicht berücksichtigt: Sortierbare Deklaration in meiner package.json Datei, die das Sortier-Modul verursacht in meinem Bündel verpackt sein. Ich bin auf ein ähnliches Problem mit anderen Modulen gestoßen, so dass es sehr wahrscheinlich ein Konfigurationsproblem von mir sein kann. Ich habe ein kleines Testpaket erstellt, das einfach, um reagieren und reagieren-sortbable-mixin erfordert das Problem zu demonstrieren:

package.json

{ 
    "name": "test", 
    "version": "1.0.0", 
    "description": "Just a test", 
    "main": "index.js", 
    "dependencies": { 
    "react": "^0.14.8", 
    "sortablejs": "^1.4.2" 
    }, 
    "devDependencies": { 
    "browserify-shim": "^3.8.12" 
    }, 
    "browserify": { 
     "transform": [ 
      "browserify-shim" 
     ] 
    }, 
    "browserify-shim": { 
    "react": "global:React", 
    "sortablejs": "global:Sortable", 
    "sortablejs/react-sortable-mixin": { 
     "depends": "sortablejs:Sortable" 
    } 
    } 
} 

index.js

"use strict"; 
var React = require('react'); 
var SortableMixin = require('sortablejs/react-sortable-mixin'); 

react-sortierbar-mixin.js (Nur der erste Teil des Moduls ...)

Hier

(function (factory) { 
'use strict'; 

if (typeof module != 'undefined' && typeof module.exports != 'undefined') { 
    module.exports = factory(require('./Sortable')); 
} 
else if (typeof define === 'function' && define.amd) { 
    define(['./Sortable'], factory); 
} 
else { 
    /* jshint sub:true */ 
    window['SortableMixin'] = factory(Sortable); 
} 
})(function (/** Sortable */Sortable) { ... 

ist der Diagnoseausgang von browserify:

% BROWSERIFYSHIM_DIAGNOSTICS=1 browserify index.js -t browserify-shim -o bundle.js 

{ file: '/home/jlafosse/test/index.js', 
    info: 
    { package_json: '/home/jlafosse/test/package.json', 
    packageDir: '/home/jlafosse/test', 
    shim: undefined, 
    exposeGlobals: { react: 'React', sortablejs: 'Sortable' }, 
    browser: undefined, 
    'browserify-shim': 
     { react: 'global:React', 
     sortablejs: 'global:Sortable', 
     'sortablejs/react-sortable-mixin': { depends: 'sortablejs:Sortable' } }, 
    dependencies: { react: '^0.14.8', sortablejs: '^1.4.2' } }, 
    messages: 
    [ 'Resolved "sortablejs/react-sortable-mixin" found in package.json to "/home/jlafosse/test/sortablejs/react-sortable-mixin"', 
    'Found depends "sortablejs" as an installed dependency of the package', 
    { resolved: 
     { '/home/jlafosse/test/sortablejs/react-sortable-mixin': 
      { exports: null, 
      depends: { sortablejs: 'Sortable' } } } } ] } 

{ file: '/home/jlafosse/test/index.js', 
    info: 
    { package_json: '/home/jlafosse/test/package.json', 
    packageDir: '/home/jlafosse/test', 
    resolvedPreviously: true, 
    shim: undefined, 
    exposeGlobals: { react: 'React', sortablejs: 'Sortable' }, 
    browser: undefined, 
    'browserify-shim': 
     { react: 'global:React', 
     sortablejs: 'global:Sortable', 
     'sortablejs/react-sortable-mixin': { depends: 'sortablejs:Sortable' } }, 
    dependencies: { react: '^0.14.8', sortablejs: '^1.4.2' } }, 
    messages: [] } 

ich die globale Shim wissen funktioniert, weil Reagieren nicht im Bundle enthalten ... aber wie oben erwähnt, ist Sortable enthalten sind. Auch wenn ich einfach ("sortablejs") anstelle der sortablejs/react-sortable-mixin in meiner index.js-Datei benötige, wird Sortable NICHT wie erwartet in das Paket aufgenommen, daher denke ich, dass entweder meine Konfiguration falsch ist oder das Modul Format für react-sortable-mixin respektiert nicht browsery-shim.

Jede Hilfe wird geschätzt.

Answer 1

Dies ist nicht möglich, ohne den Inhalt der sortierbaren Bibliothek zu ändern. Browserify Shim ändert Ihre bundle.js Datei, um entweder window.PackageName oder das gesamte Paket zu enthalten, abhängig von der browserify-shim Richtlinie in Ihrem package.json.

In Ihrer Situation, wenn Sie require('sortablejs/react-sortable-mixin'); Sie erwarten Browserify Shim die Inhalt von node_modules/sortablejs/react-sortable-mixin.js so dass require('./Sortable') wird window.Sortable innerhalb dieser Datei zu ändern. Das Problem besteht darin, dass Browserify Shim den Inhalt des Verzeichnisses node_modules nicht ändert, so dass dies nicht möglich ist.

Es gibt ein paar Optionen:

1. Statt Laden Sortable über CDN, laden Sie es global über Ihre bundle.js Skript, um sicherzustellen, es nur einmal geladen wird. Ihre index.js würde ändern:

   window.Sortable = require('sortablejs'); 
   var SortableMixin = require('sortablejs/react-sortable-mixin'); 
   

2. Fork Ihre eigene Standalone-Datei für react-sortable-mixin.js und bündeln diese direkt in Ihrem Paket enthalten, so dass Browserify Shim auf sie wirken kann.