browserify shim可排序全局未被react可排序mixin识别

Question

我遇到了一个问题，react sortable mixin不尊重我的package.json文件中的browserfy shim global:sortable声明，从而导致sortable模块被打包到我的捆绑包中。我在其他模块中也遇到过类似的问题，所以这很可能是我的配置问题。我创建了一个小的测试包，它只需要React和React可排序的mixin来演示这个问题：

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 sortable mixin.js（只是模块的第一部分…）

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

以下是浏览的诊断输出：

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

我知道全局匀场有效，因为React不包括在捆绑包中。。。然而，如上所述，Sortable也包含在内。此外，如果我只是在index.js文件中要求（'sportablejs'）而不是sortablejs/areact sortable mixin，那么sortable将不会像预期的那样包含在捆绑包中，所以我认为要么我的配置错误，要么react sorable mixin的模块格式不尊重browserify shim。

感谢您的帮助。

Answer 1

如果不修改Sortable库的内容，这是不可能的。Browserify Shim根据package.json中的browserify-shim指令，更改bundle.js文件以包含window.PackageName或整个程序包。

在您的情况下，当require('sortablejs/react-sortable-mixin');时，您希望Browserify Shim更改node_modules/sortablejs/react-sortable-mixin.js的内容，使require('./Sortable')在该文件中变为window.Sortable。问题是Browserify Shim不会更改node_modules目录的内容，所以这是不可能的。

有几个选项：

1. 与其通过CDN加载Sortable，不如通过bundle.js脚本全局加载，以确保只加载一次。您的index.js将更改为：

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

2. 为react-sortable-mixin.js派生您自己的独立文件，并将其直接捆绑在捆绑包中，以便Browserify Shim可以对其进行操作。