Question

所有

我对React工作流程很新，比如我有一个模块如：

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"))

任何人都可以向我展示一个关于如何转换的工作流程指南（如分步教程） - ＆gt;包括 - ＆gt;调试，我发现很多关于browserify / babel的帖子，但是当我尝试进行转换（使用npm install babel-preset-react然后"browserify ./app.js -o bundle.js -t babelify --presets react"）时，它总是会出现一些错误：

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 |

到目前为止，只有gulp版本有效：

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"));
});

但是有了这个，我不知道如何调试（它在一个名为bundle.js的单个文件中提供了一堆代码，即使我在browserify中指定debug：true，也没有包含用于调试目的的单独文件）。

谢谢

Answer 1

最好看一下初学者项目。这个项目将演示一个基本的工作结构，您可以将其用作您自己项目的起点。这是一个使用gulp / browserify / babel的人。 https://github.com/calitek/BasicStarter

Answer 2

我不知道你是否还在寻找这个，但你可以包括gulp-sourcemaps来帮忙。只需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")); });然后包含在您的gulp文件中。

.map

这将生成一个可用于调试的{{1}}文件。简而言之，它显示了原始源代码中发生错误的位置。

Answer 3

Browserify CLI指定你应该用方括号包装插件及其参数。

因此，您的命令应该如下：

Activity

如何使用babel为React.js转换COMMONJS样式模块

3 个答案: