快捷導(dǎo)航

react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件

更新時間：2017年05月09日 15:08:02 作者：@si

本篇文章主要介紹了react開發(fā)中如何使用require.ensure加載es6風(fēng)格的組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

其實用的babel，在瀏覽器端就應(yīng)該可以加載，之前少了個default：

require.ensure([],(require) => {
     let A = require('./a.js').default;
})

以下方式也可以，但是比較low，可以作廢了：

1、問題提出：想通過require.ensure加載es6風(fēng)格的模塊？

2、出現(xiàn)問題：import方式本身就是靜態(tài)設(shè)計方式。如果require進(jìn)來的是commonjs模塊或者amd則沒問題，但項目只想es6一個書寫風(fēng)格，行嗎？

遺憾的是：一般語言編譯工具（如babel)，不支持直接require一個es6風(fēng)格的React組件。

怎么辦？？

3、react代碼分割方式：

react代碼分割常見使用router方式，但是單頁面應(yīng)用，不打算router下，可以用require.ensure進(jìn)行按需加載

react的api在此：https://webpack.github.io/docs/code-splitting.html

文檔中并沒有實例，而且現(xiàn)階段，大部分程序已經(jīng)完全按照es6風(fēng)格的代碼。

那么怎樣讓es6模塊也能通過require呢?

先看結(jié)論：在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;

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: