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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
实现JavaScript中继承的三种方式
Oct 16 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 Javascript
js常用正则表达式集锦
May 17 Javascript
微信小程序聊天功能的示例代码
Jan 13 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP云打印类完整示例
2016/10/15 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
25个优雅的jQuery Tooltip插件推荐
2011/05/25 Javascript
用Javascript评估用户输入密码的强度实现代码
2011/11/30 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
Vue表单实例代码
2016/09/05 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
深入理解Python爬虫代理池服务
2018/02/28 Python
python实战教程之自动扫雷
2018/07/13 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python实现弹窗祝福效果
2019/04/07 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
python多线程同步实例教程
2019/08/11 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python中的整除和取模实例
2020/06/03 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
请说出几个常用的异常类
2013/01/08 面试题
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
保护地球的标语
2014/06/17 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
销售开票员岗位职责
2015/04/15 职场文书
任命书格式模板
2015/09/22 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android
Linux中文件的基本属性介绍
2022/06/01 Servers