Create React App 2.0: 整合Babel 7,Sass...

印度大使發表於2018-10-03

create-react-app 在2018-09-26釋出了2.0版本和2個小版本,目前是2.0.2

2.0版本之前是1.5.2, 1.5.2版本是2018年2月份釋出的,時隔半年之多終於迎來了一次革命性的大改變。


雖然React本身不需要任何構建依賴性,但編寫一個沒有快速測試執行器,生產minizer和模組化程式碼庫的複雜應用程式可能具有挑戰性。從第一個版本開始,Create React App的目標就是幫助您專注於最重要的事項 - 您的應用程式程式碼 - 併為您處理構建和測試設定。

它依賴的許多工具自那時起釋出了包含新功能和效能改進的新版本:Babel 7webpack 4Jest 23。但是,手動更新它們並使它們一起工作需要花費很多精力。這正是Create React App 2.0貢獻者在過去幾個月一直忙於的事情:遷移配置和依賴項,這樣您就不需要自己動手了。

現在Create React App 2.0還沒有測試版,讓我們看看有什麼新東西以及如何嘗試它!

注意

不要感到壓力升級任何東西。如果您對當前功能集,效能和可靠性感到滿意,則可以繼續使用當前版本!在生產中切換到2.0之前讓2.0版本穩定一點可能也是一個好主意。
複製程式碼

什麼是新的

以下是此版本中新功能的簡短摘要:

所有這些功能都是開箱即用的 - 要啟用它們,請按照以下說明操作。

使用Create React App 2.0啟動專案

您無需更新任何特殊內容。從今天開始,當您執行create-react-app它時,預設情況下將使用2.0版本的模板。玩的開心!

如果由於某種原因想要使用舊的1.x模板,可以通過--scripts-version=react-scripts@1.x作為引數傳遞來實現create-react-app。

更新專案以建立React App 2.0

升級到Create React App 2.0通常應該很簡單。package.json在專案的根目錄中開啟並找到react-scripts

然後將其版本更改為2.0.3:

  // ... other dependencies ...
  "react-scripts": "2.0.3"
複製程式碼

執行npm install(或者yarn,如果您使用它)。對於許多專案,修改這一行就足以升級了!

這裡有一些技巧可以幫助您入門。

當您npm start在升級後第一次執行時,您會收到一個提示,詢問您希望支援哪些瀏覽器。按y接受預設值。它們會寫入您的package.json,您可以隨時編輯它們。如果您只針對現代瀏覽器,則建立React App將使用此資訊生成較小的CSS包。

如果npm start升級後仍然無法正常工作請檢視發行說明中更詳細的遷移說明。有是此版本中的幾個重大的變動,但他們的範圍是有限的,所以他們不應該超過幾個小時進行梳理。請注意,現在可以選擇支援舊版瀏覽器以減少polyfill的大小。

如果您之前已經彈出但現在想要升級,一個常見的解決方案是找到您彈出的提交(以及任何後續提交更改配置),還原它們,升級,然後再選擇再次彈出。您現在支援開箱即用的功能(可能是Sass或CSS模組?)也是可能的。

注意

由於npm中可能存在錯誤,您可能會看到有關未滿足的對等依賴項的警告。你應該可以忽略它們。據我們所知,Yarn沒有這個問題。
複製程式碼

突破性變化

以下是此版本中重大更改的簡短列表:

  • 不再支援Node6 , 請升級到8.x
  • 對舊版瀏覽器(例如IE 9到IE 11)的支援現在可以選擇使用單獨的軟體包
  • import()現在,程式碼分割的行為更接近於規範,同時require.ensure()被禁用。
  • 預設的Jest環境現在包含jsdom。
  • 支援將物件指定為proxy設定已替換為對自定義代理模組的支援。
  • 對.mjs擴充套件的支援被刪除,直到它周圍的生態系統穩定下來。
  • PropTypes定義會自動從生產版本中刪除。

如果這些點中的任何一個對您有影響,則2.0.3發行說明包含更詳細的說明。

翻譯自官方Blog

相關文章