将 react 从 es5 转换为 es6答案

【问题标题】：Converting react from es5 to es6将 react 从 es5 转换为 es6
【发布时间】：2016-02-08 22:44:29
【问题描述】：

我正在将现有的 React 项目从 es5 转换为 es6。我有babel-preset-react。当我将 es6 添加到 myFile.js 时出现错误：

解析文件时出现意外令牌。

代码：

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() {

babel-preset-react 是否需要单独的 es6 模块？

【问题讨论】：

你配置了.babelrc吗？
@RajaSekar - 是的，看看我的回答

标签： reactjs gulp babeljs

【解决方案1】：

这就是 react 预设提供的 https://babeljs.io/docs/plugins/preset-react/:

语法流
语法-jsx
转换流带类型
transform-react-jsx
转换反应显示名称

所以，基本上这些是 jsx 和特定于流的转换器。这意味着如果您使用上述 5 个转换器未涵盖的任何其他语言功能 - 您也必须插入这些功能。

PS：在你的情况下，在对象文字中包含语句在语法上是不正确的。

{
    let m = 0;
}

上面的代码没有意义，因为它们必须是键值对（或函数表达式），而不是语句。

【讨论】：

【解决方案2】：

babel-preset-reac 不包含 ES6 功能，要启用 ES6，您应该添加 babel-preset-es2015。

【讨论】：

【解决方案3】：

这就是我如何解决将 react 从 es5 转换为 es6 的问题：

npm install babel-preset-react

然后配置.babelrc使用es2015：

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

linting (gulp-eslint)。在 eslint.config.json 中设置 es6: true

{
  "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
  }
}

我在从 es5 切换到 babel-preset-react 后找不到 jQuery 的问题。奇怪的是，我将 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 配方

   //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());
});

【讨论】：