Viết plugin Javascript nhúng với React & Webpack

Question

Tôi muốn có thể gói ứng dụng React của mình với Webpack sao cho các bản sao được phân phối vào CDN có thể được cung cấp, gọi và khởi tạo với một loạt cấu hình có liên quan đến máy khách.

Sau khi đọc this và this, Tôi đang thiết lập tập tin nhập webpack của tôi như sau:

// ... React requires etc. 

(() => { 
    this.MyApp = (config) => { 
    // some constructor code here 
    } 

    MyApp.prototype.init =() => { 
    ReactDOM.render(<MyReactApp config={MyApp.config} />, someSelector); 
    } 
})(); 

Ý tưởng được rằng trong ứng dụng của tôi, tôi có thể làm điều gì đó như sau:

<script src="./bundle.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    MyApp.init({ 
    some: "config" 
    }); 
</script> 

Và chức năng MyApp#init của tôi sẽ hiển thị ứng dụng React của tôi bên trong một số vùng chứa trên máy khách.

Tôi có đang nghĩ về điều này đúng không? Có cách nào đơn giản hơn hoặc hiệu quả hơn để thực hiện việc này không?

Lỗi của tôi là Uncaught TypeError: Cannot set property 'MyApp' of undefined, kể từ this bên trong IIFE là undefined. Tôi thực sự muốn hiểu cả lý do tại sao điều này xảy ra và lời khuyên về cách khắc phục.

Cảm ơn trước!

Answer 1

Vì vậy, tôi loại tìm thấy một giải pháp này, như mô tả here

Nếu tôi thay đổi tập tin của tôi webpack.config.js để thêm các thuộc tính sau cho đối tượng output, tức là

var config = { 
    // ... 
    output: { 
    // ... 
    library: 'MyApp', 
    libraryTarget: 'umd', 
    umdNamedDefine: true, 
    } 
} 

này quy định các tập tin tôi đang kết hợp với webpack dưới dạng mô-đun UMD, vì vậy nếu tôi có chức năng trong tệp đó và xuất ...

export const init = (config) => { 
    ReactDOM.render(<MyReactApp config={config} />, someSelector); 
} 

Tôi có thể, sau đó, trong khách hàng của tôi, làm như sau.

<script src="./bundle.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    MyApp.init({ 
    some: "config" 
    }); 
</script> 

Và ứng dụng React của tôi hiển thị.

Nếu có ai đó nghĩ rằng đây là cách thức hoạt động không tốt, tôi rất muốn nghe nó!

Answer 2

Bạn có khu vực xung quanh lớp học của mình.

MyApp cần được xuất hoặc đính kèm với đối tượng cửa sổ chung trước khi bạn có thể gọi nó như thế.

Trong trường hợp của bạn, bạn đang thực sự không gọi MyApp.init() nhưng bạn đang gọi window.MyApp.init(), nhưng cửa sổ đối tượng toàn cầu không có đối tượng MyApp đính kèm với nó.

// ... Simple attaching MyApp to the window (as a function) 
window.MyApp = (config) => { 
    ... 
} 

// ... Using class and export 
class MyApp { 
    constructor(config){...} 
} 
export default MyApp 

// or simply attach to the window 
window.MyApp = MyApp 

Tôi muốn tạo mô-đun lớp và xuất bằng cách xuất. Sau đó, tạo một tệp khác chỉ để đính kèm vào cửa sổ. Vì nó không được coi là thực hành tốt nhất để đính kèm các lớp học vào cửa sổ như thế.

// Import module and attach it to the window 
import MyApp from '.my-app' 
window.MyApp = MyApp 

Bạn có thể tìm kiếm tùy chọn nâng cao của xuất khẩu mô-đun như UMD, AMD ...