Преобразование реакции с es5 на es6

Question

Я преобразовываю существующий проект реакции с es5 на es6. У меня есть babel-preset-react. Когда я добавляю ES6 к myFile.js я получаю сообщение об ошибке:

Unexpected token while parsing file.

Код:

var React = require('react'); 
var Input = require('../common/textInput') 

var ReviewTimeOffRequestPage = React.createClass({ 
    let m = 0;//add this and I get an error 
    render: function() { 

ли реагировать столпотворение-предустановленным требуется отдельный модуль ES6?

Answer 1

Вот что реагирует предустановка обеспечивает https://babeljs.io/docs/plugins/preset-react/:

• синтаксис поток
• синтаксис JSX
• спектрально-флоу-стрип-тип
• преобразования реагирующего-JSX
• преобразование реагирующего -display-name

Итак, в основном t шлангом являются jsx и преобразователи, специфичные для потока. Это означает, что если вы используете какие-либо другие языковые функции, которые не охвачены 5 трансформаторами выше, вы также должны подключить их.

PS: в вашем случае с выражением в объектном литерале синтаксически некорректно.

{ 
    let m = 0; 
} 

код выше не имеет смысла, так как это должны быть пары ключевых значений (или выражения функций), а не инструкции.

Answer 2

babel-preset-reac не содержит функций ES6, для включения ES6 вы должны добавить babel-preset-es2015.

Answer 3

Вот как я решил проблему преобразования реагировать с ES5 в ES6:

npm install babel-preset-react

Затем настройте .babelrc использовать es2015:

{ 
    "presets": ["react", "es2015"] 
} 

linting (gulp-eslint). set es6: true in eslint.config.json

{ 
    "ecmaFeatures": { 
    "jsx": true 
    }, 
    "env": { 
    "browser": true, 
    "node": true, 
    "jquery": true, 
    "es6": true 
    }, 
    "rules": { 
    "quotes": 0, 
    "no-trailing-spaces": 0, 
    "eol-last": 0, 
    "no-unused-vars": 0, 
    "no-underscore-dangle": 0, 
    "no-alert": 0, 
    "no-lone-blocks": 0 
    }, 
    "globals": { 
    "jQuery": true, 
    "$": true 
    } 
} 

меня были проблемы с jQuery не найден после переключения с es5 на babel-preset-реагировать. Как ни странно, я перенес свой импорт jQuery в начало моей точки ввода main.js и использовал синтаксис импорта es6.

main.js

//For some reason when using babel-preset-es2015 the import needs to be 
//defined on two lines using the import syntax. 
//It also needs to be defined at the top of this file 
//$ = jQuery = require('jquery');//didnt work 
//$ = require('jquery');//didn't work 
//jQuery = require('jquery');//didnt work 
import $ from 'jquery'; 
import jQuery from 'jquery'; 

var React = require('react'); 
//... 

gulpfile recipes

//Dependencies for reference 
    var gulp = require('gulp'); 
    var connect = require('gulp-connect');//Runs a local dev server 
    var open = require('gulp-open');//Open a URL in a web browser 
    var browserify = require('browserify');//bundles js 
    var reactify = require('reactify');//transforms react jsx to js 
    var babel = require('babelify');;//transforms es6 to es5 
    var sourcemaps = require('gulp-sourcemaps');//sourcemaps for debugging 
    var source = require('vinyl-source-stream');//use conventional text streams with gulp 
    var buffer = require('vinyl-buffer');//buffer to allow sourcemaps to work 
    var concat = require('gulp-concat');//concatenates files 
    var lint = require('gulp-eslint');//Lint js files, including JSX 
    var uglify = require('gulp-uglify'); 

//.... 
gulp.task('js', function(){ 
    browserify(config.paths.mainJs, { debug: true }) 
     .transform(babel) 
     .bundle() 
     .on('error', console.error.bind(console)) 
     .pipe(source('bundle.js')) 
     .pipe(buffer()) 
     .pipe(sourcemaps.init({ loadMaps: true })) 
      // Add transformation tasks to the pipeline here. 
      .pipe(uglify()) 
     .pipe(sourcemaps.write('./')) 
     .pipe(gulp.dest(config.paths.dist + '/scripts')) 
     .pipe(connect.reload()) 
}); 

gulp.task('lint', function(){ 
    return gulp.src(config.paths.js) 
      .pipe(lint({config: 'eslint.config.json'})) 
      .pipe(lint.format()); 
});