Не работаeт import в Gulp-Babel, что не так?

Question

[Azat S.]

Здравствуйте!

Подскажите пожалуйста, столкнулся со следующей проблемой. Вроде бы всё настроил правильно, но Gulp от чего-то упорно не хочет работать с импортами.

Вот так примерно выглядит часть системы сборки:

package.json:

{
  "devDependencies": {
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "gulp": "3.9.1",
    "gulp-babel": "6.1.2",
    "gulp-uglify": "1.5.3",
    "react": "0.14.8",
    "react-dom": "0.14.8"
  }
}

gulpfile.js:

const babel = require('gulp-babel');
const gulp = require('gulp');
const uglify = require('gulp-uglify');

gulp.task('js', function () {
  gulp.src('src/js/App.js')
  .pipe(babel())
  .pipe(uglify())
  .pipe(gulp.dest('dist/js'));
});

.babelrc:

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

По задумке она должна обрабатывать прежде всего файл App.js и из него собирать всё остальное.

src/js/App.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './Main.js'

ReactDOM.render(<Main />, document.body);

Например, здесь App.js должен импортировать библиотеку Реакта из node_modules и файл Main.js, лежащий в том же каталоге, что и App.js.

src/js/Main.js

import React from 'react'

export default class Main extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello!</h1>
      </div>
    );
  }
}

Ошибок не выдаётся. Babel работает, но вот с импортами дружить не хочет совсем.

Comments

[copal]

А Вы же используете загрузчик модулей? Если нет, то почитайте о SystemJS.

Answer 1

[Слава]

импорты работают только в системах сборки. браузерифай, вебпак, системджс.

Comments

[sanns]

скажите, а почему babel не умеет делать import? Вроде же , мог бы находить это слово, и аяксом запрашивать файл, потом обрабатывать, что он и так делает для не-импортных скриптов?