Sử dụng các trình trang trí quan sát của MobX với ứng dụng tạo phản ứng

Question

MobX docs cho tôi biết rằng tôi phải "sử dụng trình biến đổi trình chuyển đổi trang trình bày và đảm bảo nó là đầu tiên trong danh sách plugin", để trang trí hoạt động. Dự án soạn sẵn của MobX cho thấy tôi cần một số .babelrc như:

{ 
    "presets": [ 
    "react", 
    "es2015", 
    "stage-1" 
    ], 
    "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"] 
} 

Làm cách nào để làm điều đó với dự án tạo ra ứng dụng tạo phản ứng? Bất kỳ nỗ lực nào để sử dụng lỗi trang trí @. Không có .babelrc ngay cả sau khi dự án bị 'đẩy ra'.

Answer 1

Bạn không thể sử dụng cú pháp trang trí trừ khi bạn eject. Tuy nhiên, bạn có thể sử dụng MobX mà không cần @ vì nó chỉ là một đường cú pháp.

Dan Abramov has articulated the reason for this

vị trí của chúng tôi rất đơn giản: chúng ta thêm biến đổi đó là một trong hai ổn định đủ (như async/chờ đợi) hoặc sử dụng nhiều bởi Facebook (như lớp tài sản). Chỉ điều đó cho phép chúng tôi tự tin đề xuất chúng, vì nếu có điều gì đó thay đổi trong tiêu chuẩn, chúng tôi sẽ viết và phát hành một mã để di chuyển khỏi chúng.

Vì hiện tại chúng tôi không sử dụng trang trí, nên chúng tôi không mang nó theo số để cung cấp đường dẫn di chuyển nếu tiêu chuẩn trở thành không tương thích. Ngoài ra, trang trí thậm chí còn không được chính thức hỗ trợ bởi Babel (có lý do chính đáng). Và khi chúng được cấu hình hơi không chính xác, người ta đổ lỗi cho React.

Bạn cũng có thể muốn xem xét create-react-app-mobx

các cuộc thảo luận liên quan:

• https://github.com/facebookincubator/create-react-app/issues/214
• https://github.com/mobxjs/mobx/issues/521
• https://github.com/facebookincubator/create-react-app/issues/411

Answer 2

Th ere là một thay thế bây giờ mà không có sẵn tại thời điểm của câu trả lời được chấp nhận. Đó là custom-react-scripts. Nó sẽ cho phép bạn kích hoạt trang trí, SASS và niceties khác trong ứng dụng CRA của bạn. Và nó làm như vậy mà không đẩy ra.

Có một số đẹp medium article giải thích các ý tưởng đằng sau nó.

Answer 3

Bạn có thể sử dụng https://www.npmjs.com/package/react-app-rewire-mobx

Phản ứng App rewired sẽ cung cấp cho bạn truy cập vào cấu hình hơn bạn chỉ cần cài đặt gói.

npm install react-app-rewired --save 

// create a file named config-overrides.js 

/* config-overrides.js */ 

const rewireMobX = require('react-app-rewire-mobx'); 

module.exports = function override(config, env) { 
    config = rewireMobX(config, env); 
    return config; 
} 

Lưu ý: này giúp bạn tiết kiệm từ ejecting. CRA không hỗ trợ sửa đổi cấu hình https://github.com/facebookincubator/create-react-app/issues/99#issuecomment-234657710.

Answer 4

Bây giờ, bạn có thể đẩy require.resolve('babel-plugin-transform-decorators-legacy') trong node_modules/babel-preset-react-app/index.js plugins array

Answer 5

Đây là giải pháp tốt nhất mà tôi đã tìm thấy mà không cần đẩy ra. Thay thế tập lệnh tạo phản ứng.

https://www.npmjs.com/package/custom-react-scripts

Nếu bạn có một khởi đầu mới dự án bằng cách sử dụng này trong terminal của bạn:

create-react-app my-app --scripts-version custom-react-scripts 

Sau đó cd vào thư mục ứng dụng của mình và tạo ra một tập tin .env. Chỉnh sửa tệp .env cho tệp này:

REACT_APP_BABEL_STAGE_0=true 
REACT_APP_DECORATORS=true 

Ứng dụng của bạn bây giờ sẽ hỗ trợ trang trí.

Nếu bạn có ứng dụng hiện có và muốn thêm ứng dụng này. Thêm .env như trên rồi:

npm i custom-react-scripts --save 

xóa tập lệnh phản ứng trong package.json của bạn. Không thay đổi các kịch bản từ các script-phản ứng bắt đầu để tạo ra-phản ứng-script bắt đầu. Để nguyên tập lệnh.

bây giờ thêm công cụ mobx của bạn với trang trí và tận hưởng ít mã bản mẫu.

package.json cuối cùng của tôi

{ "name": "mobx-test", "version": "0.1.0", "private": true, "dependencies": { "custom-react-scripts": "^0.2.1", "mobx": "^3.4.0", "mobx-react": "^4.3.5", "react": "^16.2.0", "react-dom": "^16.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }

oh và nếu bạn đang sử dụng vscode bạn sẽ muốn ẩn những lời cảnh báo về trang trí không được hỗ trợ. Để làm điều đó thêm một tập tin tsconfig.json để dự án của bạn với điều này

{ "compilerOptions": { "experimentalDecorators": true, "allowJs": true } }