browserify-shim 找不到模块

Question

鉴于以下情况:

main.js

var angular = require('angular');

包.json

{
  "main": "./main.js",
  "browser": {
    "angular": "./vendor/angular/angular.js"
  },
  "browserify-shim": {
    "angular": "angular"
  },
  "browserify": {
    "transform": [ "browserify-shim" ]
  },
  "dependencies": {
    "browserify-shim": "~3.2.0"
  }
}

运行时:

browserify . -d -o bundle.js

成功创建了一个包，browserify-shim 诊断的输出是:

{
  file: 'D:\\development\\js\\browserify\\main.js',
  info:
  {
    package_json: 'D:\\development\\js\\browserify\\package.json',
    packageDir: 'D:\\development\\js\\browserify',
    shim: undefined,
    exposeGlobals:
    {},
    browser:
    {
      angular: './vendor/angular/angular.js'
    },
    'browserify-shim':
    {
      angular: 'angular'
    },
    dependencies:
    {
      'browserify-shim': '~3.2.0'
    },
    lookedUp: false
  },
  messages: ['Found "angular" in browser field referencing "./vendor/angular/angular.js" and resolved it to "D:\\development\\js\\browserify\\vendor\\angular\\angular.js"',
  {
    resolved:
    {
      'D:\\development\\js\\browserify\\vendor\\angular\\angular.js':
      {
        exports: 'angular',
        depends: undefined
      }
    }
  }]
}

{
  file: 'D:\\development\\js\\browserify\\vendor\\angular\\angular.js',
  info:
  {
    package_json: 'D:\\development\\js\\browserify\\package.json',
    packageDir: 'D:\\development\\js\\browserify\\',
    shim:
    {
      exports: 'angular',
      depends: undefined
    },
    exposeGlobals:
    {},
    browser:
    {
      angular: './vendor/angular/angular.js'
    },
    'browserify-shim':
    {
      angular: 'angular'
    },
    dependencies:
    {
      'browserify-shim': '~3.2.0'
    },
    lookedUp: false
  },
  messages: ['Found "angular" in browser field referencing "./vendor/angular/angular.js" and resolved it to "D:\\development\\js\\browserify\\vendor\\angular\\angular.js"',
  {
    resolved:
    {
      'D:\\development\\js\\browserify\\vendor\\angular\\angular.js':
      {
        exports: 'angular',
        depends: undefined
      }
    }
  }]
}

如果 package.json 更改为此(删除浏览器部分):

{
  "main": "./main.js",
  "browserify-shim": {
    "./vendor/angular/angular.js": "angular"
  },
  "browserify": {
    "transform": [ "browserify-shim" ]
  },
  "dependencies": {
    "browserify-shim": "~3.2.0"
  }
}

我收到以下错误:

Error: module "angular" not found from "D:\\development\\js\\browserify\\main.js"

browserify-shim 诊断的输出为:

{
  file: 'D:\\development\\js\\browserify\\main.js',
  info:
  {
    package_json: 'D:\\development\\js\\browserify\\package.json',
    packageDir: 'D:\\development\\js\\browserify',
    shim: undefined,
    exposeGlobals:
    {},
    browser: undefined,
    'browserify-shim':
    {
      './vendor/angular/angular.js': 'angular'
    },
    dependencies:
    {
      'browserify-shim': '~3.2.0'
    },
    lookedUp: false
  },
  messages: ['Resolved "./vendor/angular/angular.js" found in package.json to "D:\\development\\js\\browserify\\vendor\\angular\\angular.js"',
  {
    resolved:
    {
      'D:\\development\\js\\browserify\\vendor\\angular\\angular.js':
      {
        exports: 'angular',
        depends: undefined
      }
    }
  }]
}
{
  [Error: module "angular"
    not found from "D:\\development\\js\\browserify\\main.js"
  ]
  filename: 'angular',
  parent: 'D:\\development\\js\\browserify\\main.js'
}

我的印象是浏览器部分用于配置别名，并且上面两个不同的 package.json 文件应该是等效的。

我误解了吗？

Answer 1

来自作者:

如果您不通过浏览器字段将 ./vendor/angular/angular.js 别名为 angular，则 browserify 不知道在哪里可以找到它。

因此，如果您省略浏览器字段别名，请执行以下操作:

var angular = require('./vendor/angular/angular.js');

(假设 ./vendor/angular/angular.js 与您需要它的位置相关)