React JS 프로젝트 구성 - 단일 JS 파일 구축
-
21-12-2019 - |
문제
방금 반응을 사용하기 시작했습니다. 나는 어떤 문제없이 코멘트 박스 튜토리얼을 갔다. 그러나 프레임 워크는 JS 파일을 구성하거나 SPA에 대해 단일 미지분 JS 파일을 컴파일하는 데 많은 / 지침을 제공하지 않습니다. 나는 이미 프레임 워크가 유연하고 표준을 집행하지 않고이 질문은 아마도 JavaScript 생태계에서 개발하는 사람에게는 죽은 사람이 죽었을 것입니다.
Consensus가 브라우맨 화를 사용하는 것이고 문서에서 Git Starter 프로젝트에 대한 링크가 있습니다.
https://github.com/petehunt/react-browserify-template <. / P>
이것은 좋은 시작이지만 여전히 단일 JS 파일 "index.js"만 컴파일됩니다. 브라우메이션 핸드북 중 일부를 읽었으며 단순히 다른 파일 (그리고 해당 파일이 스스로를 내보낼 필요가있는 파일이 필요합니다).
그래서 I 인명을 수정하여 다음과 같이 생겼습니다.
/** @jsx React.DOM */
var React = require('react');
var pkg = require('./package.json');
var commentBox = require('./comment-box.js');
.
comment-box.js는 기본적으로 Hello World Test :
/** @jsx React.DOM */
var React = require('react');
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.renderComponent(
<CommentBox />,
document.getElementById('content')
);
module.exports = CommentBox;
.
React-Browserify-Template의 시작 대상을 실행하면 Browser-Bundle.js Fine을 생성하는 것 같습니다.
npm start
.
그러나 빌드 목표를 시도하면
npm build
.
... 아무 일도 일어나지 않습니다. NPM의 출력을 Verbose로 변경했으며 다음을 얻습니다.
npm info it worked if it ends with ok
npm verb cli [ 'node', '/usr/local/bin/npm', 'build' ]
npm info using npm@1.4.21
npm info using node@v0.10.24
npm verb exit [ 0, true ]
npm info ok
.
Package.json에 따르면 "browser-bundle.min.js"파일을 생성하지만 대신 출력이 없습니다. 나는 누군가가 이것을 분명히 할 수 있기를 바랍니다.
해결책
문제가 무엇인지 알아 냈습니다. 원래 언급했듯이 JS 생태계에서 개발중인 사람에게는 분명합니다.)
react-browserify-template < / a> 키 "시작", "빌드"및 "테스트"키가있는 "스크립트"섹션에 세 개의 스크립트가 있습니다.
npm start
.
나는 빌드 스크립트를 유사하게 실행할 수 있다는 것을 잘못 보았습니다.
npm build (this will never work and there will be no errors/output)
.
npm run-script build
.
문서의 한 여분의 라인이 나에게 시간을 절약 할 수 있었을 수 있습니다. d 나는 이제이 접근법을 사용하고 있습니다. 또한 NODE_ENV가 프로덕션 및 용도로 설정합니다. https://github.com/ Facebook / 대응 / 이슈 / 1772
todomvc-flux 요구 기능의 소문자 '반응'을 사용하십시오 :
var React = require('react');
.
그래서 나는 그것이 권장 구문 (?)
이라고 가정합니다.다른 팁
펠릭스의 Gist를 사용하여 작동 솔루션.참고 : 이는 부드리기 및 생산 플래그를 사용하는 대리 브라우더 화 템플리트와 100 % 이와 동등하지 않습니다./fb.me/react-devtools "rel="nofollow "> http://fb.me/react-devtools "시작시 콘솔에 인쇄 됨).
모드가 솔루션에 대한 펠릭스 크레딧을 제공 할 수 있습니까?
app.js
/**
* @jsx React.DOM
*/
"use strict";
var React = require('React');
var CommentBox = require('./components/CommentBox.js');
React.renderComponent(
<CommentBox />,
document.getElementById('content')
);
.
구성 요소 / CommentBox.js
/** @jsx React.DOM */
var React = require('React');
var CommentList = require('./CommentList.js');
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
</div>
);
}
});
module.exports = CommentBox;
.
구성 요소 / commentlist.js
/** @jsx React.DOM */
var React = require('React');
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
module.exports = CommentList;
.