react开发中如何使用require.ensure加载es6风格的组件


Posted in Javascript onMay 09, 2017

其实用的babel,在浏览器端就应该可以加载,之前少了个default:

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

以下方式也可以,但是比较low,可以作废了:

1、问题提出:想通过require.ensure加载es6风格的模块?

2、出现问题:import方式本身就是静态设计方式。如果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

文档中并没有实例,而且现阶段,大部分程序已经完全按照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规范或者是amd、cmd规范书写也成。

import React from 'react'
export default class Hello extends React.Component {
  render(){
    return (
      <div>Hello</div>
    )
  }
}
//warning:这一句必须加上,因为在require.ensure中使用了require引入模块
module.exports = Hello;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
jquery滚动特效集锦
Jun 03 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 Javascript
Vue2单一事件管理组件通信
May 09 #Javascript
react-router实现按需加载
May 09 #Javascript
BootStrap表单时间选择器详解
May 09 #Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 #Javascript
JS触摸与手势事件详解
May 09 #Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 #Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 #Javascript
You might like
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
商务主管岗位职责
2013/12/08 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
个人担保书格式范文
2014/05/12 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
经理岗位职责范本
2015/04/15 职场文书
升学宴家长致辞
2015/07/27 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
nginx实现发布静态资源的方法
2021/03/31 Servers