Trình duyệt sẽ ghi đè cấu hình của chính nó khi duyệt thư mục chứa package.json?

Question

Tôi đã tạo một ứng dụng JavaScript đơn giản bằng cách sử dụng AngularJS.

Tôi đang sử dụng NPM và Bower để quản lý phụ thuộc của tôi, Gulp để automatise nhiệm vụ của tôi và tôi muốn sử dụng CommonJS 'module.exports/require() để buộc tất cả mọi thứ lên với nhau: Tôi quyết định đi cho Duyệt số để gói tất cả.

Có my very empty and clean project on Github, nếu bạn muốn xem.

---

Để có thể require('angular'), tôi cấu hình Browserify để Shim rằng AngularJS vào các module hiện có, sử dụng browserify-shim. Khá đơn giản, đây là một phần liên quan của package.json tôi:

"browser": { 
    "angular": "./bower_components/angular/angular.min.js" 
}, 
"browserify": { 
    "transform": [ 
    "browserify-shim" 
    ] 
}, 
"browserify-shim": { 
    "angular": { 
    "exports": "angular" 
    } 
} 

Nó khá gọn gàng, tập tin JS chính của tôi bây giờ trông như thế này:

'use strict'; 

var angular = require('angular'); 

angular.module('MyApp', []) 
    .controller('View1Ctrl', ['$scope', require('./view1/view1.js')]) 
    .controller('View2Ctrl', ['$scope', require('./view2/view2.js')]); 

Và đó hoạt động.

---

Bây giờ, tôi đang cố gắng để có được vào một số công cụ tiên tiến hơn, sử dụng thư viện bên ngoài có sẵn thông qua Bower. Chúng được cài đặt dưới bower_components và trông giống như dự án của tôi, chúng có một số package.json, bower.json và tất cả.

Lấy ví dụ ng-thoại, trong đó cũng require('angular'). Khi lấy thông qua bower install ng-dialog --save, tôi làm hai việc:

1. liên kết tập tin JS quận của họ để một từ khóa (giả sử ng-dialog) trong tôi package.json
2. require('ng-dialog') trong tập tin JS chính chính để có mô-đun góc của tôi phụ thuộc vào của họ.

Dưới đây là phần có liên quan cập nhật của tôi package.json (lưu ý rằng ng-thoại không không cần phải được shimmed):

"browser": { 
    "angular": "./bower_components/angular/angular.min.js", 
    "ng-dialog": "./bower_components/ng-dialog/js/ngDialog.min.js" 
}, 
"browserify": { 
    "transform": [ 
    "browserify-shim" 
    ] 
}, 
"browserify-shim": { 
    "angular": { 
    "exports": "angular" 
    } 
} 

...và tôi cập nhật app.js file:

'use strict'; 

var angular = require('angular'); 
require('ng-dialog'); 

angular.module('MyApp', ['ngDialog']) 
    .controller('View1Ctrl', ['$scope', require('./view1/view1.js')]) 
    .controller('View2Ctrl', ['$scope', require('./view2/view2.js')]); 

tôi nhận được lỗi sau khi Browserify-ing này lên:

Error: Cannot find module 'angular' from 'C:\...\bower_components\ng-dialog\js' 

Sau nửa giờ tốt về tinh chỉnh xung quanh, nó bật ra rằng SIMPLY xóa tệp package.json từ bower_components/ng-dialog làm cho tất cả diễn ra suôn sẻ.

Điều gì đang diễn ra và làm cách nào mà tôi nên gói gọn ngDialog.min.js?

Answer 1

Như đã nêu trong Browserify Handbook

Hệ thống mô-đun mà browserify sử dụng cũng giống như nút, do đó các gói xuất bản NPM mà ban đầu được dự định để sử dụng trong nút nhưng không phải trình duyệt sẽ chỉ làm việc tốt trong trình duyệt quá.

Ngày càng có nhiều người đang xuất bản mô-đun lên npm được thiết kế cố ý để làm việc trong cả hai nút và trong trình duyệt bằng cách sử dụng browserify và nhiều gói trên npm được thiết kế để chỉ sử dụng trong trình duyệt. npm is for all javascript, mặt trước hoặc chương trình phụ trợ.

Do đó sử dụng phân phối NPM của Angular và ngDialog gói chứ không phải là những cái Chòi chơi cho

npm install angular ng-dialog --save 

này sẽ loại bỏ các nhu cầu làm toàn bộ cấu hình trong package.json và chỉ cần gọi require() trong dự án sẽ làm cho trình duyệt hoạt động.

Khi chúng tôi yêu cầu bất kỳ mô đun nút nào trong dự án, hãy duyệt các gói có trong trường main của package.json của mô-đun nút tương ứng. Hiện tại, trường chính của ngDialog tham chiếu đến tệp ngDialog.js, do đó bạn sẽ cần phải thay đổi nó thành ngDialog.min.js để duyệt qua các gói đó. (Đây không phải là một vấn đề lớn khi bạn nén bó browserify bạn sử dụng gulp-uglify)

Tôi đã chia hai mã của bạn và thực hiện những thay đổi cần thiết trong nó - Kiểm tra xem chúng ở đây https://github.com/pra85/angular-seed