Sử dụng browserify với npm jQuery và các plugin không phải của npm

Question

Tôi đang sử dụng browserify để đóng gói mã front-end. Nó đã được tuyệt vời cho đến nay, nhưng tôi đã gặp khó khăn khi trộn các gói npm và non npm. Ví dụ, sử dụng phiên bản npm của jQuery với các phiên bản không phải CJS của các plugin jQuery.

Giải pháp hiện tại của tôi là sử dụng khóa browser trong package.json để trỏ đến vùng của jQuery và sau đó sử dụng browserify-shim để thêm nó làm phụ thuộc của các plugin.

Có cách nào sạch hơn để làm điều này hơn những gì tôi hiện có không?

Edit: tôi đang cố gắng sử dụng NPM và package.json để quản lý tất cả phụ thuộc của tôi, vì vậy tôi không muốn sử dụng Chòi chơi cho dự án này. Hãy gọi cho tôi điên:)

Package.json

"dependencies": { 
    "jquery": "~2.1.0", 
    "browserify": "latest", 
    "browserify-shim": "^3.5.0", 
    "jquery-waypoints": "git@github.com:imakewebthings/jquery-waypoints.git", 
    "jquery-validation": "git://github.com/jzaefferer/jquery-validation" 
    }, 
    "browser": { 
    "jquery": "./node_modules/jquery/dist/jquery.js", 
    "jquery-waypoints": "./node_modules/jquery-waypoints/waypoints.js", 
    "jquery-validate": "./node_modules/jquery-validation/build/release.js" 
    }, 
    "browserify-shim": { 
    "jquery": "$", 
    "jquery-waypoints": { 
     "depends": [ 
     "jquery" 
     ] 
    }, 
    "jquery-validate": { 
     "depends": [ 
     "jquery" 
     ] 
    } 
    }, 
    "browserify": { 
    "transform": [ 
     "browserify-shim" 
    ] 
    } 

Answer 1

tôi sẽ làm như sau:

1. Sử dụng debowerify để bao gồm các thư viện có sẵn trong lùm cây, trong trường hợp của bạn sẽ được, jquery các điểm, xác nhận jquery

2. Sử dụng jquery có trong gói npm, có sẵn tại đây https://github.com/jquery/jquery

Như vậy, tôi cũng sẽ xóa browserify-shim trong thời gian này.

Answer 2

Bạn đang thiếu định phụ thuộc một cách chính xác tôi tin rằng (ví dụ thiết lập "$" để khai jquery của bạn):

"plugin": { 
    "exports": "plugin", 
    "depends": [ 
    "jquery:$" 
    ] 
},... 

Answer 3

Chỉ thị browser chỉ là một bí danh để xác định những gì bạn muốn khi bạn viết jquery. Các mặc định cho jquery là con đường trong node_modules, vì vậy dòng của bạn:

"jquery": "./node_modules/jquery/dist/jquery.js", 

... là không cần thiết và bạn có thể gỡ bỏ nó, bởi vì khi bạn viết "depends": ["jquery"] trong cấu hình Browserify Shim của bạn, jquery đã chỉ ra ./node_modules/jquery/dist/jquery.js không có dòng đó trong khóa browser của bạn. Trong thực tế, bạn có thể xóa hoàn toàn chỉ thị browser, bạn phải kiểm tra cấu hình trong các tệp package.json của các plugin jQuery nhưng hầu hết chúng đều đã được đặt bí danh như bạn có chúng, không có ghi đè browser.

Nếu không, tôi không nghĩ rằng có một cách sạch hơn để thực hiện việc này. Như bạn đã nói, bạn cần sử dụng Browserify Shim để làm hỏng các plugin jQuery không phải của CJS và bạn đang làm đúng cách.