babel и Reactionjs: как использовать импорт в стиле es2015

Question

Я новичок в сценариях сборки javascript и javascript, и я пытаюсь создать сценарий сборки "ориентированный на будущее" для сборки приложения ReactJS/Redux. У меня проблемы с получением импорта для работы между файлами JavaScript.

Мой вопрос: каков рекомендуемый подход для добавления поддержки операторов импорта в стиле es2016?

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

• Просто мне стало немного удобнее с Гулпом. Можно ли использовать только Gulp, Babel и npm, чтобы добавить поддержку операторов импорта в стиле es2016?
• Я задаюсь вопросом, по-прежнему ли Gulp по-прежнему рекомендуется для создания пакетов javascript, или я должен вместо этого изучать WebPack.
• Раньше я использовал Browserify для включения других файлов javascript, но слышал, как люди упоминали, что вы можете делать то, что Browserify делает с чистым npm, и что Browserify может потерять популярность.
• Я заметил много примеров ReactJS, использующих WebPack. Я не уверен, где WebPack подходит или если это необходимо. Мне интересно, если WebPack занимает место Browserify и нужен ли мне WebPack или я могу обойтись без него.
• Я бы предпочел использовать тот синтаксис импорта, который рекомендуется. Я полагаю, что Browserify использует require(), а синтаксис es2015 использует "import ... from". Мне интересно, если "import... from" - это рекомендуемый синтаксис для импорта сейчас или мне следует использовать что-то еще.
• Я пытался использовать Babel 6, чтобы использовать код в стиле es2015. Я заметил, что он не обрабатывает операторы импорта предварительно, и мне кажется, что я где-то читал, что Babel 6 убрал поддержку операторов импорта. Мне интересно, что использовать вместо этого для предварительной обработки операторов импорта.
• Мне было бы интересно минимизировать количество конфигурации (точечные файлы и тому подобное) для создания базового проекта.

Ниже приведен простой пример, который я пытался получить, используя Gulp. В настоящее время, когда запускается Gulp, is создает пакет, но оператор import, похоже, не работает. Когда я пытаюсь загрузить index.html, все выглядит объединенным, и я получаю ошибки JavaScript.

больше package.json

{
  "name": "test_jsx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.14.0",
    "babel-plugin-transform-react-jsx": "^6.8.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-cli": "^1.2.2",
    "gulp-concat": "^2.6.0",
    "gulp-print": "^2.0.1",
    "gulp-sourcemaps": "^1.6.0"
  }
}

больше gulpfile.js

var gulp = require("gulp");
var print = require('gulp-print');
var sourcemaps = require("gulp-sourcemaps");
var babel = require("gulp-babel");
var concat = require("gulp-concat");

const paths = {
   src: 'src/**/*js',
   dest: 'build'
}

gulp.task("default", function () {
  return gulp.src(paths.src)
    .pipe(print())
    .pipe(sourcemaps.init())
    .pipe(babel({ presets: ['react', 'es2015', ]}))
    .pipe(concat("bundle.js"))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist"));
});

больше src / test.js

// This import statement is what I'm trying to get working.
import { square } from './lib';

var profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3>
</div>;

больше src / lib.js

// This is just a example function that I want to try to import
export function square(x) {
        return x * x;
}

больше index.html

<script src="dist/bundle.js"></script>
TEST

Построить шаги

npm install 
./node_modules/.bin/gulp

Answer 1

Вы можете использовать либо webpack, либо browserify для создания своего пакета, но они оба будут использовать babel для поддержки ES6. Я не уверен, где вы читали, что Babel 6 удалил оператор импорта - я использую Babel 6, и у меня не было такой проблемы. Вы также можете собрать пакет с помощью gulp, но я считаю, что это больше работы и его сложнее поддерживать. Но вы можете получить здесь много мнений.

Недавно Facebook предоставил инструмент для начальной загрузки приложения React без необходимости настройки инструментов сборки: создание приложения React. Возможно, вы захотите попробовать это или один из доступных шаблонных стартеров на Github, если вы не любите возиться со скриптами сборки. Он менее гибок, но если вы хотите уменьшить количество настроек, он выполняет свою работу.