브라우저에서 라이브러리의 파일을 어떻게로드합니까?

Question

lib 안에 JSON 파일을로드하고 JSON에서로드 한 내용을 사용하여 노드 파일을로드하는 노드 라이브러리를 만들었습니다.

그래서 lib 디렉토리 구조는이하지 mylib.js에서

lib/mylib.js 
data/data.json 
index.js 

이다;

var PATH = path.join(
    __dirname, 
    '../data/data.json' 
); 

function load() { 
    return JSON.parse(
     fs.readFileSync(
     PATH, 
     'utf8' 
     ) 
    ); 
    } 

module.exports = { load: load}; 

서버 측에서 완벽하게 작동합니다. 나는 load 함수를 호출 할 수 있으며 json 파일의 내용을 보여줍니다. 제 질문은 브라우저에서 이것이 어떻게 작동하는지입니다. 나는 내 테스트 서버에서 신속하게 테스트를 수행 했으므로 제대로 작동했다. 브라우저에 json 파일의 내용을 인쇄했습니다 (크롬과 사파리 사용).

나는 client.js

import mymodule from 'mylib/lib/mylib'; 

function MyObject({myobj, styles}) { 
    return (
    <Flex center> 
     <Spacing push={ {direction: 'ends', size: 'huge'} }> 
     <h1>{mymodule.load()}</h1> 
     </Spacing> 
    </Flex> 
); 

에서이 코드를 가지고 그리고 이것은 브라우저에서 JSON 내용을 인쇄합니다. 나는 이것이 어떻게 작동하는지 100 % 확실하지 않다. 브라우저가 mymodule.load()을 호출하면 상대 경로 인 ../data/data.json에서 JSON 파일을 찾습니다. 브라우저는 파일 경로를 어떻게 처리합니까? 서버가 전체 lib를 브라우저에 보내고 브라우저가 일종의 임시 저장소에 저장 했습니까?

Answer 1

그래서 몇 가지. 첫째, 서버 측에서 JSON이 애플리케이션 수명 동안 정적 인 경우 (예 : 재시동 없음) 실제로 수행 할 수있는 것보다 훨씬 간단합니다.

// in lib/mylib.js 
function load() { 
    return require('../data/data.json'); 
} 

실제로 내 다른와 함께 할 것이 아니라로드 함수를 호출하는 것보다, 개인적으로 필요하지만, 단지에 원 : 단지 응용 프로그램 시작에 한 번을로드 할 것 경우, 당신은이 작업을 수행 할 수 있습니다 그렇게할만한 이유가있을 경우를 대비하여 함수에 남겨 둡니다.

클라이언트에서 세 가지 중 하나를 수행 할 것입니다. 한, 당신은 대중에게 데이터 폴더를 설정하고 다음 클라이언트에서 아약스 요청을 호출하여 MYLIB 기능을 활용

app.use(express.static('./data')); 

두, 당신은 명시 적 경로에서의 자신의 처리를 수행 할 수 있습니다

를

app.get('/data', function(req, res) { return res.send(myLib.load()); }); 

세 가지 예를 들어 webpack과 같은 빌드 도구를 사용하여 데이터 파일을 가져올 수 있습니다. json으로 로더 :

이

https://github.com/webpack-contrib/json-loader