CODEWITHSUNDEEP
reactjsbrowserifybabeljs
Kuan
Kuan

Reputation: 11389

How to use babel to transpile COMMONJS style module for React.js

All:

I am pretty new to React working flow, say if I have one module like:

var React = require("react");
var ReactDOM = require("react-dom");
var Todo = React.createClass({
    render: function() {
        return <div>Hello there </div>;
    }
});
ReactDOM.render(<Todo />, document.getElementById("div1"))

Could anyone show me an work-flow guideline(like step by step tutorial) about how to transpile -> include -> debug, I find a lot posts about browserify/babel, but when I tried to transpile( using npm install babel-preset-react and then "browserify ./app.js -o bundle.js -t babelify --presets react" ) , it always give some error like:

SyntaxError: C:/Temp/web/lnreact/app.js: Unexpected token (10:9)
   8 | var Todo = React.createClass({
   9 |  render: function() {
> 10 |          return <div>Hello there </div>;
     |          ^
  11 |  }
  12 | });
  13 |

By now, only the gulp version works:

var gulp = require("gulp");
var browserify = require("browserify");
var babelify = require("babelify");
var source = require("vinyl-source-stream");


gulp.task("build", function(){
    return browserify({
        entries: "./app.js", 
        extensions: [".js"], 
        deug:true
    })
    .transform("babelify", {
        presets: ["react"]
    })
    .bundle()
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("dist"));
});

But with this, I do not know how to debug( it gives me a bunch of code in one single file called bundle.js, there is no seperate files included for debug purpose even I specify debug: true in browserify).

Thanks

Upvotes: 1

Views: 612

Answers (3)

gustavohenke
gustavohenke

Reputation: 41440

Browserify CLI specifies that you should wrap the plugin + its arguments with square brackets.

Therefore, your command should probably be the following:

browserify ./app.js -o bundle.js -t [ babelify --presets react ]

Upvotes: 0

Gary Storey
Gary Storey

Reputation: 1814

I don't know if you are still looking for this but you can include gulp-sourcemaps to help out. Just npm install gulp-sourcemap --save-dev then include in your gulp file.

var gulp = require("gulp");
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");

gulp.task("default", function () {
  return gulp.src("src/**/*.js")
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(concat("all.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

This will generate a .map file that you can use to debug. In a nutshell, it shows where in your original source code the error is occurring.

Upvotes: 0

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

It is best to look at a starter project. This is a project that will demonstrate a basic working structure that you can use as a starting point for your own projects. Here is one that uses gulp/browserify/babel. https://github.com/calitek/BasicStarter.

Upvotes: 1

Related Questions