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

2024-10-05 11:44:38

其实用的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;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解React开发中使用require.ensure()按需加载ES6组件

首先介绍下动态加载函数: require.ensure([], (require)=>{ let A = require('./a.js').default; }) 如果想要动态加载出es6代码组件,直接require一个es6风格的组件是不行的,因为一般的语言编译工具(如babel),不支持直接require一个es6风格的组件. 那么有种办法可以解决:在es6方式书写的组件底部增加一句:module.exports = YouclassName; import React, {Compone
react开发中如何使用require.ensure加载es6风格的组件

其实用的babel,在浏览器端就应该可以加载,之前少了个default: require.ensure([],(require) => { let A = require('./a.js').default; }) 以下方式也可以,但是比较low,可以作废了: 1.问题提出:想通过require.ensure加载es6风格的模块? 2.出现问题:import方式本身就是静态设计方式.如果require进来的是commonjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗? 遗憾的是:
jQuery移动web开发中的页面初始化与加载事件

页面初始化事件(pagebeforecreate.pagecreate) Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件.例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条.这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化.注以下的页面初始化事件在每个"page"只被触发一次,与每次页面在显示或者
简单模拟node.js中require的加载机制

一.先了解一下,nodejs中require的加载机制 1.require的加载文件顺序 require 加载文件时可以省略扩展名: require('./module'); // 此时文件按 JS 文件执行 require('./module.js'); // 此时文件按 JSON 文件解析 require('./module.json'); // 此时文件预编译好的 C++ 模块执行 require('./module.node'); // 载入目录module目录中的 package.js
require.js 加载过程与使用方法介绍

require.js简介 require.js是javascript模块化编程中常用的一个JS库. 现在的网页功能较以前已经丰富了许多,同时网页上需要导入越来越多的JS文件来实现这些功能.使用原有的script标签一个个导入js文件会导致代码的复杂与臃肿.并且导入的各个JS文件可能会有冲突,导致许多功能无法使用且会使bug非常难定位. 这样的情况下我们就需要一个合适的Javascript模块载入框架,来满足我们团队协作.模块复用.单元测试等等一系列复杂的需求.使用require.js进行模块化加
React中Suspense及lazy()懒加载及代码分割原理和使用方式

目录 React.lazy() 概括为什么需要懒加载如何进行代码分割 Suspense Suspense应用场景 Suspense实现原理总结 Suspense和lazy()都是react中比较新的特性,在项目中使用还比较少,但是学习一下有助于在后面的项目中使用,同样可以一窥React未来的发展方向 React.lazy() 概括顾名思义lazy()方法是用来对项目代码进行分割,懒加载用的.只有当组件被加载,内部的资源才会导入为什么需要懒加载在React的项目中import导入其他组
Android实现从缓存中读取图片与异步加载功能类

本文实例讲述了Android实现从缓存中读取图片与异步加载功能类.分享给大家供大家参考,具体如下: 在新浪微博的微博列表中的图片,为了加速其显示也为了加快程序的响应,可以参考该图片异步加载类实现. public class AsyncImageLoader { //SoftReference是软引用,是为了更好的为了系统回收变量 private HashMap<String, SoftReference<Drawable>> imageCache; public AsyncImag
require.js 加载 vue组件 r.js 合并压缩的实例

准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多合并文件目录忽略部分文件及文件夹一.先说vue 组件先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入略 <div id="header"&g
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容. 第一步,首先新建一个vue+webpack+vuecli的demo,如下操作: 全局安装vue-cli,vue-cil是vue的脚手架工具,安装命令: npm install -g vue-cli 第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作: cd vue_test_project //进入vue_test_
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e

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

相关推荐

随机推荐