babel и reactjs: как использовать импорт стиля 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». Мне интересно, является ли «импорт ... из» рекомендуемым синтаксисом для импорта сейчас или я должен использовать что-то еще.
• Я пытаюсь использовать Babel 6 для использования кода стиля es2015. Я заметил, что он не предварительно обрабатывает операторы импорта, и я думаю, что я где-то читал, что Babel 6 удалил поддержку операторов импорта. Мне интересно, что использовать вместо этого для предварительной обработки импортных заявлений.
• Мне было бы интересно свести к минимуму количество конфигурации (файлы точек и т. Д.) Для создания базового проекта.

Ниже представлен простой пример того, что я пытался работать, используя Gulp. В настоящее время при запуске Gulp создается пакет, но оператор импорта, похоже, не работает. Когда я пытаюсь загрузить 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 построить свой узелок, но они оба будут используя столпотворение, чтобы обеспечить поддержку ES6.Я не уверен, где вы читаете, что Babel 6 удалил заявление об импорте - я использую Babel 6 и не имел такой проблемы. Вы также можете построить комплект с глотком, но я считаю, что это больше работает и, как правило, сложнее поддерживать. Но вы можете получить много упрямых ответов здесь.

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