browserify-shimソート可能なグローバルがreact-sortable-mixinによって認識されない

Question

react-sortable-mixinがbrowserify-shimグローバルを尊重していないという問題があります：sortableモジュールが私のpackage.jsonファイル内でソート可能な宣言私のバンドルにパッケージ化してください。私は他のモジュールと同様の問題に遭遇しているので、私のところでは設定上の問題があるかもしれません。

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'); 

：私は単に問題を実証するために、sortbable-ミックスインを反応させ、反応し、必要と小さなテストパッケージを作成しました

react-sortable-mixin.js（モジュールの最初の部分...）

しかしながら、上述のようにソート可能が含まれている...

% 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: [] } 

私はバンドルに含まれていない反応するのでグローバルシミング作品を知っている：

(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) { ... 

はここbrowserifyから診断出力です。また、私のindex.jsファイルにsortablejs/react-sortable-mixinの代わりに（ 'sortablejs'）を必要とするだけであれば、Sortableはバンドルに含まれないので、私の設定が間違っているか、モジュールreact sortable-mixinの形式はbrowserify-shimを尊重しません。

何か助けていただければ幸いです。

Answer 1

これは、Sortableライブラリの内容を変更しなければ不可能です。 Browserify Shimは、package.jsonのbrowserify-shim指示文に応じて、bundle.jsファイルにwindow.PackageNameまたはパッケージ全体を含めるように変更します。あなたは内容require('./Sortable')は、そのファイル内window.Sortableなるようnode_modules/sortablejs/react-sortable-mixin.jsのを変更するBrowserifyシムを期待しているrequire('sortablejs/react-sortable-mixin');あなたの状況では

、。問題は、Browserify Shimがnode_modulesディレクトリの内容を変更しないためです。

はカップルのオプションがあります。

は

1. むしろCDN経由でソート可能ロードするよりも、それは一度だけロードされていることを確認するためにあなたのbundle.jsスクリプト経由でグローバルにロードします。

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

2. フォークreact-sortable-mixin.jsための独自のスタンドアロンのファイルをしてBrowserifyシムは、それに基づいて行動できるように、あなたのバンドルで直接このバンドル：あなたのindex.jsに変わります。