react開發(fā)中如何使用require.ensure加載es6風格的組件
其實用的babel，在瀏覽器端就應該可以加載，之前少了個default：
require.ensure([],(require) => {
let A = require('./a.js').default;
})
以下方式也可以，但是比較low，可以作廢了：
1、問題提出：想通過require.ensure加載es6風格的模塊？
2、出現(xiàn)問題：import方式本身就是靜態(tài)設計方式。如果require進來的是commonjs模塊或者amd則沒問題，但項目只想es6一個書寫風格，行嗎？
遺憾的是：一般語言編譯工具（如babel)，不支持直接require一個es6風格的React組件。
怎么辦？？
3、react代碼分割方式：
react代碼分割常見使用router方式，但是單頁面應用，不打算router下，可以用require.ensure進行按需加載
react的api在此：https://webpack.github.io/docs/code-splitting.html
文檔中并沒有實例，而且現(xiàn)階段，大部分程序已經完全按照es6風格的代碼。
那么怎樣讓es6模塊也能通過require呢?
先看結論：在es6方式書寫的模塊底部增加一句module.exports=yourclassName
例如：module.exports = Hello;
4、代碼舉例：
1）Container模塊如下：
import React, {Component} from 'react';
export default class Container extends Component {
constructor() {
super();
this.state = {
currentComponent: null
}
}
doSomething = () => {
require.ensure(['./app2'], (require) => {
const Comp = require('./app2');
this.setState({
currentComponent: <Comp/>
})
})
};
render() {
return (
<div>
<span onClick={this.doSomething} style={{border: "1px solid #000"}}>點擊后，按需加載如下模塊</span>
{this.state.currentComponent}
</div>
)
}
}
2）app2模塊如下
注意：在es6方式寫的模塊的最底下增加一句：module.exports = Hello;即可
或者app2直接按照commonjs規(guī)范或者是amd、cmd規(guī)范書寫也成。
import React from 'react'
export default class Hello extends React.Component {
render(){
return (
<div>Hello</div>
)
}
}
//warning:這一句必須加上,因為在require.ensure中使用了require引入模塊
module.exports = Hello;
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
React Native實現(xiàn)進度條彈框的示例代碼
本篇文章主要介紹了React Native實現(xiàn)進度條彈框的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
本篇文章主要介紹了使用ES6語法重構React代碼詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
React+Typescript創(chuàng)建項目的實現(xiàn)步驟
通過React組件庫和TypeScript的強類型特性,開發(fā)者可以創(chuàng)建出具有優(yōu)秀用戶體驗和穩(wěn)定性的Web應用程序,本文主要介紹了React+Typescript創(chuàng)建項目的實現(xiàn)步驟,感興趣的可以了解一下2023-08-08
react antd checkbox實現(xiàn)全選、多選功能
目前好像只有table組件有實現(xiàn)表格數(shù)據(jù)的全選功能,如果說對于list,card,collapse等其他組件來說,需要自己結合checkbox來手動實現(xiàn)全選功能,這篇文章主要介紹了react antd checkbox實現(xiàn)全選、多選功能,需要的朋友可以參考下2024-07-07
本篇文章主要介紹了淺談React + Webpack 構建打包優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
React Native:react-native-code-push報錯的解決
這篇文章主要介紹了React Native:react-native-code-push報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
隨著代碼的增加，每次的狀態(tài)改變，頁面進行一次 reRender ，這將產生很多不必要的 reRender 不僅浪費性能，從而導致頁面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問題小結,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了react中ref獲取dom或者組件的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家介紹了Jira 任務管理系統(tǒng)項目總結講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了淺談React之狀態(tài)(State)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09