1

構文を使用している別のライブラリにあるreactアプリを作成しています。libを使用した私のコードは次のとおりです。requireES6

var React = require('react');
var Calendar = require('horario-calendar');

var appts = [];

React.render(<Calendar />, document.getElementById('calendar'));

horario-calendarサードパーティのアプリであり、ES6構文がいっぱいです。すべてのコードgulpを. タスクは次のとおりです。transpileES6

var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream')
var to5 = require('6to5ify');

module.exports = function(gulp, config) {
    gulp.task('browserify', function() {
        browserify(config.app.src, {debug: true})
            .transform(to5)
            .transform(reactify)
            .bundle()
            .pipe(source(config.app.bundleName))
            .pipe(gulp.dest(config.app.bundle));
    });
};

しかし、それはコードによるものではありませんtranspile。requireそれはtranspile私のコードだけです。私はまだES6スタイルのインポートをすべてhorario-calendar. transpileそのコードにも何をする必要がありますか?

4

2 に答える 2

0

Browserify の代わりに webpack を使用することをお勧めします。さらに、JSX ホットローダーの利点も享受できます。https://github.com/babel/6to5-loaderは、箱から出してすぐに問題なく動作しましたが、これを置き換えました:

{ test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'}

彼らの例では、これに：

{ test: /\.jsx$/, exclude: /node_modules/, loader: '6to5-loader'}

私はたまたま.jsxファイルでアロー関数しか使っていなかったので、気をつけてください。

于 2015-02-15T12:07:52.660 に答える