explicite import없이 별도의 파일에 리액션 구성 요소 나누기

Question

Ruby Sinatra 백엔드 기반의 리작트 앱을 작성하려고합니다. main.js 파일은 응용 프로그램을 렌더링 :

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Galery from './components/Galery' 

ReactDOM.render(
    <Galery />, 
    document.getElementById('app') 
); 

나는 하나 개의 파일 안에 내 모든 구성 요소를 가지고하는 데 사용하지만, 별도의 파일로 분할합니다.

import React, { Component } from 'react'; 
import Image from 'Image' 

class Galery extends Component { 
    ... 
    <Image ... /> 
    ... 
} 

명시 적으로 필요한 구성 요소를 가져 피하고 대신 주 내에서로드 할 수 있나요 : 나는 Galery.js에서 다음과 같이 각 부모의 구성 요소 파일에 자식 요소를 가져 오면 나는 단지이 실행되도록 관리 .js 파일? 또한 각 파일에서 구성 요소 모듈을 가져 오지 않는 것이 좋습니다. 여기

내 웹팩 설정입니다 :

module.exports = { 
    entry: './react/main.js', 
    output: { 
    path: __dirname, 
    filename: './public/bundle.js' 
    }, 
    resolve: { 
    root: __dirname, 
    alias: { 

    }, 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015'] 
     }, 
     test: /\.js$/, 
     exclude: /(node_modules|bower_components)/ 
     } 
    ] 
    } 
}; 

Answer 1

짧은 답변 :

그것은 매우 webpack 같은 도구가 기능을 제거하여 번들 크기 주위 지능형 최적화 작업을 수행하기 때문에 당신이 필요로하는 곳에 명시 적 수입을 사용하는 것이 좋습니다

사용되지 않습니다. 이를 염두에 두면서 가장 짧은 대답은 다음과 같습니다. webpack + babel + React를 사용하는 방식으로 파일 당 imports을 정의하는 것을 피할 수 없습니다.

---

긴 대답 :

예, 당신이 그것을 할 수 있지만 정직 아니다. 루비와 달리, 상수/변수 룩업은 자바 스크립트에서 같은 방식으로 작동하지 않습니다. 루비에서 잘 작동을 다음

# a.rb 
A = 10 

# b.rb 
require "./a.rb" 
puts a # => 10 

파일 a.rb 구문 분석 및 b.rb에 포함되는 경우, 루비에서 만든 여분의 하위 네임 스페이스가 없기 때문이다. 최상위 단위는 모두 b.rb 내부에 정의 된 것처럼 존재합니다. More on this

JS와 비교하려면 모듈 포함 방법에 대해 약간 알아둬야합니다. 지금은 꽤 복잡한 상황입니다. NodeJS를 먼저 고려해 보겠습니다. 브라우저가 아닌 환경에서는 여분의 플래그가있는 최첨단 버전 (이 시점의 v 9)을 제외하고는 아직 구현 된 import 기능이 없습니다. 따라서 webpack과 import과 같은 것을 사용할 때 내부적으로 발생하는 문제는 webpack 자체의 require 심으로 변환된다는 것입니다. 그리고 import과 require이 변환되는 방식은 전자가 "정적"스타일 로더이고 후자가 동적 스타일 로더이기 때문에 미묘하게 다릅니다. 매우 기본적인 수준에서는 import 문이 파일의 맨 위에 있어야하며 require 문은 어디에도있을 수 있으며 해석기가 해당 줄을 발견하면 파일 확인이 수행됩니다. 아래에서 보게되는 이상한 효과가 있습니다.

NodeJS require의 작동 방식은 포함 된 파일에서 module.exports 개체를 식별하는 것입니다. 이 객체는 외부에 노출 된 함수/객체를 지정합니다. 따라서, 루비는 달리, 이미 암시 지역 네임 스페이스가 대신 글로벌 $LOADED_FEATURES 하나, module.exports의 (원하는 경우 또는 그룹화) :

// a.js 
const a = 10; 
module.exports = { a: a }; 

// b.js 

const a = require('./a.js'); 
console.log(a); // { a: 10 }; 

한 가지 방법이 전역 변수입니다 주위에 해킹.Ruby와 마찬가지로 JavaScript는 암시 적으로 전역 네임 스페이스를 사용합니다. 특히 브라우저에서는 window 및 NodeJS에 global을 사용하는 것이 더 일반적입니다. 하나의 아이디어는 다음과 같습니다 :

// main.js 

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import Image from 'components/image.js'; 
import Gallery from 'components/gallery.js'; 

window.React = React; 
window.ReactDOM = ReactDOM; 
window.Image = Image; 
window.Gallery = Gallery; 

// gallery.js 

export default class Gallery extends React.Component { 
    render() { 
    return <Image />; 
    } 
} 

그러나 이것은 작동하지 않습니다. 실제로 ES6 import 기능을 에뮬레이트하기 위해 정적으로 정의 된 파일 및 함수 집합 인 webpack은 webpack 자체의 require 함수를 통해 에뮬레이션하려고 시도합니다. 그리고 이것은 수입이 완료 될 때까지 세계적으로 부착 된 상수를 이용할 수 없게합니다. 따라서이 문제를 해결하기 위해 이전의 require 스타일 로딩을 사용하면 webpack 자체의 require 기능이 변경됩니다. 에 위의 내용을 변경하여 : 당신이 볼 수 있듯이

// main.js 

const React = require('react'); 
const ReactDOM = require('react-dom'); 

window.React = React; 
window.ReactDOM = ReactDOM; 

const Image = require('components/image.js').default; 
const Gallery = require('components/gallery.js').default; 

window.Image = Image; 
window.Gallery = Gallery; 

// gallery.js 

export default class Gallery extends React.Component { 
    render() { 
    return <Image />; 
    } 
} 

,이 방법은 자바 스크립트 응용 프로그램을 실행 얻기 위해 너무 많은 작품입니다. 그러나 중요한 문제는 사용하지 않는 기능을 알지 못하기 때문에 webpack이 지능적인 최적화를 수행 할 수 없다는 것입니다. 따라서이 모든 것을하지 않는 것이 가장 좋습니다.