サーバー側SyntaxError es6でファイルを使用すると予期しない識別子が発生する

Question

なぜこのエラーが発生するのかを知っていますが、最適な解決策が何であるかはわかりません。私は、range_date.jsやes6を使用してサーバーからそれを要求またはインポートしようとすると、構文エラーが発生します。これは、アプリケーションディレクトリ内の同じファイルをインポートするときは発生しません。サーバーとアプリケーションの両方に独自のmain.jsファイルがあり、同じではありません。だから、問題の根源はそこにあります。

私はpluralsightのチュートリアルに従っていましたが、サーバー側はes6を使用する予定はありませんでしたが、使用する必要があることがわかりました。

これに最適な解決策は何ですか？私はgulpファイルに何かする必要がありますか？サーバーmain.jsファイル、またはアプリケーション内でdatabase.jsを移動しますか？またはサーバー側が理解できる方法でrange_date.jsを再作成することもできますか？

Gulpfile.babel

var gulp = require('gulp'); 
var LiveServer = require('gulp-live-server'); 
var browserSync = require('browser-sync'); 
var browserify = require('browserify'); 
var source = require('vinyl-source-stream'); 
var babelify = require('babelify'); 

gulp.task('live-server', function(){ 
    var server = new LiveServer('server/main.js'); 
    server.start(); 
}) 

gulp.task('bundle',['copy'], function(){ 
    return browserify({ 
     entries:'app/main.jsx', 
     jquery : 'jquery-browserify', 
     debug:true, 
    }) 
     .transform(babelify, 
      { 
       "presets": ["es2015", "react", "stage-1"], 
       "plugins": ["transform-decorators-legacy", "transform-function-bind"], 
       extensions: [".jsx", ".js",] 
      }) 
     .bundle() 
     .pipe(source('app.js')) 
     .pipe(gulp.dest('./.tmp')); 
}) 

gulp.task('copy', function() { 
    gulp.src(['app/*.css', 'app/Icons/**/*','app/stores/**/*', 'app/helper/**/*', 'app/dispatcher.js','bundle.js', 'app/helpers/RestHelper.js', 
      'app/actions/OperationActionCreator.jsx', 'app/actions/SurgeonActionCreator.jsx', 
      'app/actions/PatientActionCreator.jsx','app/actions/ORActionCreator.jsx', 'server/database.js', 
      'node_modules/guid/guid.js','node_modules/jquery/**/*', 'bower_components*/**/*']) 
     .pipe(gulp.dest('./.tmp')); 
}) 

gulp.task('serve', ['bundle', 'live-server'], function(){ 
    browserSync.init(null,{ 
     proxy:"http://localhost:7777", 
     port: 9001 
    }) 
}) 

gulp.run('serve') 

サーバーmain.js

var express = require('express'); 

var app = new express(); 

var parser = require('body-parser'); 

var React = require('react'); 

var Operation = require('./models/Operation.js'); 

require('babel-register'); 

require('./database.js'); 

app.get('/', function(req, res) { 
    res.render('./../app/index.ejs', {}) 

// var application = 
// React.createFactory(require('./../app/components/OperationList.jsx')); 

//  Operation.find(function(error,doc){ 
//   var generated = React.renderToString(application({ 
//    items:doc 
//    })); 
//   res.render('./../app/index.ejs',{reactOutput:generated}); 
//  }) 

}) 
    .use(express.static(__dirname + '/../.tmp')) 
    .listen(7777); 

app.use(parser.json()); 
app.use(parser.urlencoded({extended:false})); 

require('./routes/operations.js')(app); 

アプリ/コンポーネント/ SRC/range_date.js

import moment from 'moment-timezone' 

export default class RangeDate { 
    constructor(date = null) { 
    if (date) { 
     this.date = date instanceof RangeDate ? moment(date.value()) : moment(date) 
    } else { 
     this.date = moment() 
    } 
    } 

    toString() { 
    return this.date.format('MMMM D, YYYY') 
    } 

    toCal() { 
    return this.date.format('MMM[\n]M/D') 
    } 

    toRef() { 
    return this.date.format('YYYY-MM-DD') 
    } 

    value() { 
    return this.date._d 
    } 

    advance(increment, amount) { 
    return new RangeDate(
     this.date.clone().add(amount, increment) 
    ) 
    } 
} 

サーバー/ database.js

var mongoose = require('mongoose'); 
... 
var RangeDate = require('./../app/components/src/range_date') 

mongoose.connect('mongodb://####', function(){ 

    var today = new Date() 
    var operations = [{ 
     operationName: "Operation", 
     patientName: "Adrian Garcia", 
     typeOfSurgery: "Open Heart", 
     id: 'foobar', 
     title: 'Do this', 
     startDate: today.advance('days', 1).toRef(), 
     duration: 5, 
     resource: 'One' 
    }) 
    ... 
}) 

Answer 1

私はes6を使用していない別のrange_date.jsを作成しました。

var moment = require('moment-timezone') 
var react = require('react') 

module.exports = function RangeDate(date) { 
    if (date) { 
     this.date = date instanceof RangeDate ? moment(date.value()) : moment(date) 
    } else { 
     this.date = moment() 
    } 

this.toString = function() { 
    return this.date.format('MMMM D, YYYY') 
} 

this.toCal = function() { 
    return this.date.format('MMM[\n]M/D') 
} 

this.toRef = function() { 
    return this.date.format('MMMM D, YYYY, HH:mm:ss') 
} 

this.value = function() { 
    return this.date._d 
} 

this.advance = function(increment, amount) { 
    return new RangeDate(
     this.date.clone().add(amount, increment) 
    ) 
} 
}