react 개발 에서 require.ensure 를 사용 하여 es6 스타일 의 구성 요 소 를 불 러 오 는 방법
2465 단어 require.ensurees6
require.ensure([],(require) => {
let A = require('./a.js').default;
})1.질문:require.ensure 를 통 해 es6 스타일 의 모듈 을 불 러 오고 싶 습 니까?
2.문제 발생:import 방식 자체 가 정적 디자인 방식 이다.require 가 comonjs 모듈 이나 amd 로 들 어 오 면 괜 찮 지만 프로젝트 는 es6 하나의 쓰기 스타일 만 생각 하 시 겠 습 니까?
안 타 깝 게 도 일반 언어 컴 파일 도구(예 를 들 어 babel)는 es6 스타일 의 React 구성 요 소 를 직접 require 하 는 것 을 지원 하지 않 습 니 다.
어 떡 하지?
3.react 코드 분할 방식:
react 코드 분할 은 흔히 router 방식 을 사용 하지만 단일 페이지 에 서 는 router 를 사용 하지 않 고 require.ensure 로 필요 에 따라 불 러 올 수 있 습 니 다.
react api 여기 있 습 니 다:https://webpack.github.io/docs/code-splitting.html
문서 에는 인 스 턴 스 가 없 으 며,현 단계 에 서 는 대부분의 프로그램 이 에 스 6 스타일 의 코드 를 완전히 따 랐 다.
그렇다면 어떻게 하면 es6 모듈 도 require 를 통과 할 수 있 습 니까?
먼저 결론 보기:es6 방식 으로 작 성 된 모듈 밑 에 module.exports=yourclass Name
예 를 들 어 module.exports=Hello;
4.코드 예:
1)컨테이너 모듈 은 다음 과 같다.
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>
)
}
}
메모:es6 방식 으로 작 성 된 모듈 의 맨 아래 에 module.exports=Hello 를 추가 합 니 다....하면 된다
또는 app 2 는 comonjs 규범 이나 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;이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React 개발 에 require.ensure()를 사용 하여 필요 에 따라 ES6 구성 요 소 를 불 러 옵 니 다.우선 동적 로드 함수 소개: 에 스 6 코드 구성 요 소 를 동적 으로 불 러 오 려 면 에 스 6 스타일 의 구성 요 소 를 직접 require 해 서 는 안 됩 니 다.일반적인 언어 컴 파일 도구(예 를 들 어 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
