1

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

包.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 被包含在内。此外，如果我只是 require('sortablejs') 而不是 index.js 文件中的 sortablejs/react-sortable-mixin，Sortable 将不会按预期包含在包中，所以我的想法是我的配置错误或模块react-sortable-mixin 的格式不尊重 browserify-shim。

任何帮助表示赞赏。

4

1 回答 1

0

如果不修改 Sortable 库的内容，这是不可能的。Browserify Shim 将您的文件bundle.js更改为包含window.PackageName或整个包，具体取决于.browserify-shimpackage.json

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

有几个选项：

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

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

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

于 2016-04-01T18:57:59.930 回答