如何使用通天transpile CommonJS的風格模塊React.js

所有：如何使用通天transpile CommonJS的風格模塊React.js

我非常新反應工作流程，說如果我有一個模塊，如：

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

誰能告訴我一個關於如何transpile - > include - > debug的工作流程指南（像一步一步的教程），我發現很多關於browserify/babel的文章，但是當我嘗試transpile（使用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 |

到現在爲止，只有吞氣版本的作品：

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，也包含用於調試的單獨文件）。

謝謝

來源

2015-11-25 Kuan

最好看一個起動器項目。這是一個項目，將演示一個基本的工作結構，您可以將其用作自己項目的起點。這是一個使用gulp/browserify/babel的人。 https://github.com/calitek/BasicStarter。

來源

2015-11-25 18:45:48

謝謝，我在問題中提到，如果我用一飲而盡，我已經獲得這個項目的工作，但唯一缺少的是調試（只有一個很長的bundle.js）。你能告訴我如何調試？ – Kuan

您打開哪個瀏覽器頁面？順便說一下，該項目包含節點server.js。 –

我在Chrome 46中打開了該bundle.js。在source選項卡中，只有index和dist/bundle.js，我猜應該包含app.js，但不確定 – Kuan

我不知道你是否仍在尋找這個，但你可以包括gulp-sourcemaps來幫忙。只需npm install gulp-sourcemap --save-dev然後包含在你的吞嚥文件中。

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

這將生成一個.map文件，您可以使用該文件進行調試。簡而言之，它顯示了您的原始源代碼中發生錯誤的位置。

來源

2016-06-29 20:39:20

Browserify CLI指定你應該用方括號包裝插件+它的參數。

因此，您的命令可能應該如下：

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

來源

2016-10-11 12:26:42 gustavohenke

如何使用通天transpile CommonJS的風格模塊React.js

回答

相關問題