Question

的package.json

  "devDependencies": {
    "babel-plugin-transform-react-jsx": "^6.23.0",
    "babel-preset-es2015": "^6.24.0",
    "babelify": "^7.3.0",
    "browser-sync": "^2.11.1",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-plumber": "^1.1.0",
    "react-paginate": "^4.3.1",
    "react-router": "^2.8.1"
    "browser-sync": "^2.11.2",
    "chart.js": "^2.1.6",
    "colors": "^1.1.2",
    "event-stream": "^3.3.2",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-concat": "^2.6.0",
    "gulp-less": "^3.0.5",
    "gulp-less-sourcemap": "^1.4.3",
    "gulp-plumber": "^1.1.0",
    "gulp-react": "^3.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.5.3",
    "gulp-util": "^3.0.7",
    "lodash": "^4.13.1",
    "path": "^0.12.7",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "reactify": "^1.1.1"
  }

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');
var path = require('path');
var rename = require("gulp-rename");
var eventStream = require('event-stream');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var less = require('gulp-less-sourcemap');
var babel = require('gulp-babel');
var babelify = require("babelify");
var browserify = require('gulp-browserify');
var browserSync = require('browser-sync').create();


gulp.task('themeSelector', function() {

  return gulp.src( ['./js/theme-selector/**/*.js', '!./js/**/*.min.*'] )
    .pipe(plumber(onError))
    .pipe(babel({
        presets: ['es2015'],
        plugins: ['transform-react-jsx'],
    }))
    .pipe(browserify({
      transform: ['babelify', 'reactify'],
      debug: true
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./js/theme-selector/'));
});

文件：
JS /主题选择器/ app.js

    import React, { Component } from 'react';
    import { render } from 'react-dom';
    import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router';
    import Loader from './components/loader';

    class Main extends Component {...}

JS /主题选择器/组件/ loader.js

import React, { Component } from 'react';


class Loader extends Component {
  render() {
    return (
        <div class="loader-wrap" id="page-settings-loader">
            I'm a loader
        </div>
    )
  }
};

export default Loader;

如果我将loader组件移动到app.js中，则编译文件时没有错误。如果我import React from 'react';而不是import React, { Component } from 'react';我没有收到任何错误，但是我在JSX的第一行得到了一个意外的令牌。

显然，我没有通过babel / browserify正确地管理其他组件。

Answer 1

除非你的帖子中有拼写错误，否则你输入的Loader不正确

应该是

 import React, { Component } from 'react';
 import { render } from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router';
 import Loader from './component/loader';

    class Main extends Component {...}

由于您说文件位于 js / theme-selector / 组件 /loader.js

而不是 js / theme-selector / 组件 /loader.js

Answer 2

我不知道为什么而且我有兴趣知道但是添加了一个.babelrc文件，其中包含以下问题：

{
  "plugins": ["transform-react-jsx"],
  "presets": ['es2015', 'react']
}

React模块导入/导出解析错误：第1行：非法导入声明（gulp）

2 个答案: