Question

我有一个问题，其中react-sortable-mixin不尊重browserify-shim全局：我的package.json文件中的可排序声明因此导致Sortable模块打包在我的包中。我遇到了与其他模块类似的问题，所以很可能是我的配置问题。我创建了一个小测试包，只需要React和react-sortbable-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) { ...

以下是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: [] }

我知道全局填充工作正常，因为React不包含在捆绑包中......但是如上所述，正在包含Sortable。另外，如果我只需要（＆＃39; sortablejs＆＃39;）而不是我的index.js文件中的sortablejs / react-sortable-mixin，Sortable将不会按预期包含在包中，所以我的想法是我的配置是错误的，或者react-sortable-mixin的模块格式不尊重browserify-shim。

感谢任何帮助。

Answer 1

在不修改Sortable库的内容的情况下，这是不可能的。 Browserify Shim会将您的bundle.js文件更改为window.PackageName或整个包，具体取决于您browserify-shim中的package.json指令。

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

有几种选择：

不是通过CDN加载Sortable，而是通过node_modules脚本全局加载它，以确保它只加载一次。您的bundle.js将更改为：
```
index.js
```
为window.Sortable = require('sortablejs'); var SortableMixin = require('sortablejs/react-sortable-mixin');分叉您自己的独立文件，并将其直接捆绑在您的捆绑包中，以便Browserify Shim可以对其进行操作。

browserify-shim可排序的全局不被react-sortable-mixin识别

1 个答案: