使用docker創建ReactJS開發環境，實時編譯JSX

為什么要使用docker來創建ReactJS開發環境

剛剛開始學習ReactJS的時候，折騰了很久才搭建起開發環境。所以，我就開始嘗試將ReactJS的編譯環境打包在docker中，并使用gulp來動態編譯。后來一直在使用這個docker鏡像，來幫助我開發ReactJS應用。

使用到的技術

• docker
• gulp
• browserify

創建鏡像

首先，要根據自己的需要創建一個reactJS編譯環境的鏡像。

Dockerfile

FROM node

RUN mkdir /runtime
WORKDIR /runtime
RUN npm init -y</pre> 
 
install gulp for auto build

RUN npm install --save-dev gulp gulp-uglify;
RUN npm install --save-dev del;
RUN npm install --save-dev vinyl-source-stream;
RUN npm install --save-dev browserify;
RUN npm install --save-dev reactify;
RUN npm install --save-dev react react-dom;
install react and build tool
RUN npm install -g browserify
RUN npm install --save-dev react react-dom babelify babel-preset-react
add gulpfile
ADD . /runtime
CMD ["bash", "run.sh"]
 gulpfile.js 用來定義gulp要做的事情。 
gulpfile.js
/ gulpfile.js /

// Load some modules which are installed through NPM.
var gulp = require('gulp');
var browserify = require('browserify');  // Bundles JS.
var del = require('del');  // Deletes files.
var reactify = require('reactify');  // Transforms React JSX to JS.
var source = require('vinyl-source-stream');
// Define some paths.
var paths = {
app_js: ['./src/js/app.js'],
js: ['./src/js/*.js'],
};
// An example of a dependency task, it will be run before the css/js tasks.
// Dependency tasks should call the callback to tell the parent task that
// they're done.
gulp.task('clean', function(done) {
del(['build'], done);
});
// Our JS task. It will Browserify our code and compile React JSX files.
gulp.task('js', function() {
// Browserify/bundle the JS.
console.log('trigger browserify');
browserify(paths.app_js)
.transform(reactify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./src/'));
});
gulp.task('called', function(){
console.log("Call");
})
// Rerun tasks whenever a file changes.
gulp.task('watch', function() {
gulp.watch(paths.js, ['called','js']);
});
// The default task (called when we run gulp from cli)
gulp.task('default', ['watch', 'js']);</pre> 
 
 run.sh 用啟動gulp腳本，對本地文件進行監視，一旦有文件改動，立即執行編譯。 

run.sh
!/usr/bin/bash
./node_modules/gulp/bin/gulp.js
鏡像構建
 將 Dockerfile , gulpfile.js , run.sh 三個文件放在同一目錄下。 運行 
docker build -t reactjs-builder-runtime . 
 

運行
 在項目靜態文件夾中運行，請將ReactJS項目入口文件名設置為 app.js 。 如果項目的入口文件不是 app.js ,可以修改 gulpfile.js 中的路徑設置。 
docker run --name project-name-reactjs-builder -v &quot;$PWD&quot;:/runtime/src -d reactjs-builder-runtime 
 

查看日志：
docker logs -f project-name-reactjs-builder 
 

代碼和鏡像托管
 
  
 項目代碼托管在 yanqiw/reactjs-builder-runtime 

 鏡像托管在 react-runtime 
</ul>
 </div>