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 相关文章推荐
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
Javascript 实用小技巧
Apr 07 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 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中生成UUID自定义函数分享
2015/06/10 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
jquery ztree实现右键收藏功能
2017/11/20 jQuery
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
使用python 对验证码图片进行降噪处理
2019/12/18 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
软件测试英文面试题
2012/10/14 面试题
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
爱牙日活动总结
2014/08/29 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
项目安全员岗位职责
2015/02/15 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
如何理解及使用Python闭包
2021/06/01 Python
Python各协议下socket黏包问题原理
2022/04/12 Python