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 相关文章推荐
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
面向对象继承实例(a如何继承b问题)(自写)
Jul 01 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
webpack优化的深入理解
Dec 10 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
解决Antd Table表头加Icon和气泡提示的坑
Nov 17 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 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 模拟$_PUT实现代码
2010/03/15 PHP
windows下升级PHP到5.3.3的过程及注意事项
2010/10/12 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
php四种定界符详解
2017/02/16 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
由面试题加深对Django的认识理解
2019/07/19 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
phpquery中文手册
2021/03/18 PHP
一份教室追逐打闹的检讨书
2014/09/27 职场文书
网络管理员岗位职责
2015/02/12 职场文书
整脏治乱工作简报
2015/07/21 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle