Browserifying phản ứng với addons cho một thành phần độc lập, có thể sử dụng bởi các plugin

Question

Tôi experementing một chút với phản ứng và browserify và có những lời chúc:

• Tôi muốn bó tất cả các mã được viết bởi tôi thành một tập tin duy nhất
• tôi muốn bó tất cả phụ thuộc bên thứ 3 (phản ứng, phản ứng-router, lodash vv) vào tập tin riêng biệt, một cho mỗi lib, để tối đa hóa khả năng bộ nhớ đệm

tôi đã cố gắng làm những điều trình bày ở trên nhưng tôi chạy vào tình huống cụ thể này:

Ở một số nơi trong mã của tôi, tôi muốn sử dụng phản ứng với addons và như vậy yêu cầu nó như thế này: var React = require('react/addons). Tôi không làm điều này trong tất cả các phần của mã của tôi và nó không được thực hiện trong phụ thuộc bên thứ 3 như phản ứng-router. Điều này dường như tạo ra một cuộc xung đột. Gói được trình duyệt sẽ chỉ có sẵn thông qua var React = require('react/addons) sẽ phá vỡ các phụ thuộc của bên thứ ba hoặc tôi sẽ phải phản ứng theo cả hai có hoặc không có bộ bổ sung mà các menas phản ứng được đóng gói và tải xuống hai lần.

Tôi đã cố gắng sử dụng aliasify và đặt react bí danh cho react/addons nhưng tôi không thể làm cho nó hoạt động. Điều này có khả thi không?

Một giải pháp có thể chấp nhận sẽ được bó chỉ addons trong một gói riêng biệt và thông qua đó làm cho cả hai react và react/addons có sẵn thông qua các cuộc gọi đến require. Có bất kỳ điều này có thể không?

Bổ sung Là nhận xét cho nhận xét đầu tiên của BrandonTilley, điều này không chỉ áp dụng cho React và addons. Lodash cũng đi kèm với một số bản phân phối khác nhau và tôi muốn có thể chọn phiên bản để sử dụng trong webapp của tôi trong trường hợp này là tốt.

Answer 1

Cảm ơn mọi đề xuất nhưng giải pháp tôi đã chọn là "shim" nếu đó là cụm từ chính xác. Trông như thế này:

1. Browserify phản ứng/addons vào tập tin riêng của nó
2. Tạo tập tin của riêng tôi (gọi tắt là shim) chỉ chứa này: module.exports = require('react/addons');
3. Browserify shim của tôi và sử dụng tùy chọn lộ, phơi bày nó như là phản ứng

Bây giờ, hoặc nếu phản ứng hoặc phản ứng/addons cần tôi nhận được phản ứng/addons

Answer 2

Âm thanh như trường hợp sử dụng hoàn hảo cho factor-bundle.

Từ browserify handbook:

yếu tố-bó chia browserify đầu ra thành nhiều mục tiêu bó dựa trên entry-point. Đối với mỗi điểm vào, một tệp đầu ra cụ thể mục nhập được xây dựng. Các tệp cần thiết bởi hai hoặc nhiều tệp mục nhập được đưa vào một gói chung.

Answer 3

Chú ý rằng những gì bạn muốn đạt được là tài liệu ở đây: Browserify partitionning

Tôi đóng gói ứng dụng của tôi trong 2 phần: appLibs.js và app.js. Tôi cũng đã thực hiện việc này để lưu bộ nhớ đệm nhưng tôi chọn đặt tất cả các mã không thay đổi thường xuyên trong một gói duy nhất thay vì tách nó như bạn muốn, nhưng bạn có thể sử dụng cùng một mẹo.

Dưới đây là đoạn code mà có thể bạn quan tâm:

var libs = [ 
    "react", 
    "react/addons", // See why: https://github.com/substack/node-browserify/issues/1161 
    ... other libs 
]; 

gulp.task('browserify-libs', function() { 
    var b = browserify(...); 
    libs.forEach(function(lib) { 
     b.require(lib); 
    }); 
    return b.bundle()....... 
}); 
gulp.task('browserify',['browserify-libs'],function() { 
    var b = browserify(...); 
    libs.forEach(function(lib) { 
     b.external(lib); 
    }); 
    return b.bundle()....... 
}); 

Bằng cách này, phản ứng chỉ được đóng gói một lần trong appLibs.js và có thể được yêu cầu bên app.js sử dụng cả hai react và react/addons

Nếu bạn thực sự muốn bó libs của bạn trong các tệp riêng biệt, bó sau đó với b.require("myLib"), nhưng trong trường hợp này, hãy chắc chắn kiểm tra xem các thư viện đó có phụ thuộc trực tiếp hay không. Nếu một gói lib có một sự phụ thuộc trong React, điều này có nghĩa là lib sẽ được đóng gói trong gói, có khả năng dẫn đến nhiều gói có React bên trong chúng (và gây ra các lỗi lạ khi chạy). Thư viện thay vì sử dụng peerDependencies để b.require không cố gắng đóng gói các phụ thuộc này