browserify-墊片沒有找到模塊

Question

假定下列：

main.js

var angular = require('angular'); 

的package.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 

包是成功創建並從br輸出owserify-墊片的診斷是：

{ 
    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通過瀏覽器領域的角度，browserify不知道在哪裏可以找到它。

所以，如果你忽略了瀏覽器領域的別名，請做到：

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

（假設./vendor/angular/angular.js是相對於你在哪裏需要它）