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 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
js获取视频时长代码
Apr 10 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 Javascript
js实现下拉框二级联动
Dec 04 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
用vue写一个日历
Nov 02 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php strftime函数的详细用法
2018/06/21 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
浅析Ajax语法
2016/12/05 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
新员工欢迎词
2014/01/12 职场文书
护士毕业生自荐信
2014/02/07 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
大学生党课心得体会
2016/01/07 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书