만들고 깨뜨리는 React 개발 환경을 만든다(gulp + browserify + babel)

6094 단어 babelbrowserifyReactgulp
사내 React(flux) 공부회를 위해 간단한 React 개발 환경을 만들었으므로 공개합니다.
htps : // 기주 b. 코 m / k 주 gk / f ぅ x_ 보이 rp ぁ

기본적인 부분을 이 기사에서 해설하기 때문에, 앞으로 React 시작하고 싶지만 설정이 번거로울 것 같다··라고 하는 분은 꼭 시험해 주세요!(피드백 대환영입니다.)

전제


  • node v5.3.0에서 작동 확인

    • 디렉토리 구성



    디렉토리 구성은 다음과 같습니다. (일단 React에 익숙해지는 것이 목적이므로 test와 css는 생략하고 있습니다.)

    2016/03/27 추가
    Jest에서 React Component를 테스트하는 기사를 작성했으므로 함께 참조하십시오!
    ぃ tp // m / k jugk / ms / d0306 e b2 a1 f97 a07 d6f
    추가 여기까지
    .
├── .babelrc
├── dist         //browserify でコンパイルされた bundle.js ファイルを配置する。
├── gulpfile.js
├── index.html
├── js           // JavaScript ファイルを配置する
│    └── index.js
│    └── 〜
│  
├── node_modules
└── package.json

    빌드 흐름





    각 파일 설명



    gulpfile.js



    gulp task를 설명합니다.
    js 태스크에서는, js 디렉토리 부하의 파일을 browserify 로 bundle.js 파일에 정리해, dist 디렉토리에 배치하고 있습니다.

    gulpfile.js
    ''use strict';
var gulp = require('gulp');
var gutil = require('gulp-util');

var browserify = require('browserify');
var watchify = require('watchify');
var babelify = require('babelify');

var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');

var b = browserify({
  entries: ['./js/index.js'],
  transform: ['babelify'],
  cache: {},
  packageCache: {},
  plugin: [watchify]
})
.on('update', bundle)
.on('log', gutil.log)

function bundle(){
  return b.bundle()
    .on('error', gutil.log.bind(gutil, 'Browserify Error')  )
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./dist'));
}

gulp.task('js', bundle);
gulp.task('default', ['js']);

    여기서 중요한 것은, browserify 를 설정하고 있는 이하의 기술입니다.

    gulpfile.js
    var b = browserify({
  entries: ['./js/index.js'],
  transform: ['babelify'],
  cache: {},
  packageCache: {},
  plugin: [watchify]
})
.on('update', bundle) //ソース更新時に bundle を再実行
.on('log', gutil.log) //標準出力にログを書き出す
  • transform에 babelify를 지정합니다. b.bundle 함수를 실행하면 babelify가 ES6, JSX transpile을 실행합니다.
  • plugin에 watchify를 지정합니다. b.bundle 함수가 실행될 때 watchify에 의한 소스 모니터링이 시작되고 소스를 업데이트할 때마다 차등 build가 실행됩니다.

    • .babelrc


  • babelify 모듈 설정은 여기에 설명됩니다.

    • .babel.rc
    {
  "presets": ["es2015", "react"],
  "plugins": ["transform-object-assign"]
}
  • ES6 및 JSX를 컴파일하기 위해 es2015 및 react presets (기본 플러그인 세트)를 정의합니다.
  • React 개발에서 자주 사용되는 Object.assign() 을 활성화하기 위해 transform-object-assign plugin 을 정의합니다.
  • 기타 babel plugin은 여기

    • index.html



    그럼, 다음과 같이 script 태그로 컴파일 끝난 bundle.js 를 읽고 있을 뿐입니다.

    index.html
    ~
<body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
</body>
~

    index.js



    browserify의 진입점이 되는 파일입니다.
    다음과 같이 index.html DOM에 React Component를 마운트합니다.
    위의 babelify 설정을 통해 다음 모든 js 파일에서 import 구문과 JSX 설명을 사용할 수 있습니다.

    index.js
    import React from 'react'
import {render} from 'react-dom'
import ExampleApp from './components/ExampleApp'

render(
  <ExampleApp />,
  document.getElementById('root')
)

    build



    이 설정을 사용하면 콘솔에서 gulp 명령을 두드리면 소스 컴파일 + 모니터링이 시작됩니다. (global에 gulp을 설치한 경우 gulp 명령을 사용하여 OK입니다.)
    $ node ./node_modules/gulp/bin/gulp
[15:31:10] Using gulpfile ~/flux_boilerplate/gulpfile.js
[15:31:10] Starting 'js'...
[15:31:12] 690771 bytes written (2.48 seconds)

    build가 실패하면, 다음과 같은 에러(일부 dir name 개변)가 콘솔에 토출됩니다.
    [15:36:01] Browserify Error { [SyntaxError: /xxx/flux_boilerplate/js/components/ExampleApp.js: Adjacent JSX elements must be wrapped in an enclosing tag (33:6) while parsing file: /xxx/flux_boilerplate/js/components/ExampleApp.js]
  pos: 675,
  loc: Position { line: 33, column: 6 },
  _babel: true,

    분명히 Example.js 파일의 33 번째 줄에있는 JSX가 태그로 닫히지 않았기 때문입니다.

    수정하고 파일을 업데이트하면 자동으로 컴파일이 시작되므로 오류가 없어질 때까지 코드를 수정합니다.

    동작 확인



    브라우저에서 index.html을 열면 bundle.js가 실행됩니다.

    이상 오랫동안 설명해 왔습니다만, 여기까지 할 수 있으면 나머지는 만들어 부서, React 에 익숙해질 뿐입니다!
    덧붙여서, Redux 등을 도입하고 싶은 경우라도, 기본적으로 상기의 설정을 유용할 수 있으므로, 시도해 보세요.

    미래의 도전


  • error 메시지를 더 깨끗하게 출력하고 싶습니다.
  • test를 작성합니다. => ぃ tp // m / k jugk / ms / d0306 e b2 a1 f97 a07 d6f
  • production에 대한 build task를 정의합니다.
  • rails 와 결합하는 best practice를 찾는다.

    • 참고로 한 기사



    React.js + Babel + Browserify + gulp 환경을 만들어 보았습니다.
    Python으로 Microsoft Azure FaceAPI와 PC 카메라를 실시간 연결
    mo.js -DOM Animation with SVG-

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage