Настройка реагировать с помощью глотка и вавилона? - PullRequest
Новая
       29

Настройка реагировать с помощью глотка и вавилона?

0 голосов
/ 23 мая 2018

Всем доброго времени суток.

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

Структура папки> 

gulpfile.js
content
|--js
|--src
   |--libraries
   |  |--jquery (and others)
   |--react
      |--containers
      |  |--my-base-file.jsx
      |--components
         |--my-first-component.jsx
         |--my-second-component.jsx

Теперь мои реагирующие элементы выглядят так:

my-base-file.jsx 

var FirstComponent = require('FirstComponent');
ReactDOM.render(<FirstComponent />, document.getElementById('content'))

my-first-component.jsx 

var SecondComponent = require('SecondComponent');

class FirstComponent extends React.Component {
    render() {
        return (
            <div>
                <p>Some Content</p>
                <SecondComponent />
            </div>
        )
    }
}

module.exports = FirstComponent;

my-second-component.jsx 

class SecondComponent extends React.Component {
    render() {
        return (
            <div>
                **MAGIC**
            </div>
        )
    }
}

module.exports = SecondComponent;

Теперь мой gulpfile.js выглядит примерно так: 

var gulp = require('gulp');

var concat = require('gulp-concat');
var react = require('gulp-react');

var babel = require('gulp-babel');

var folders = {
    jsOut: "./content/js/",
    common: [
        "./content/src/libraries/jquery/jquery-3.3.1.js",
        "**MORE-FILES**",
    ],
    example: [
        "./content/src/react/containers/my-base-file.jsx"
    ],
};

gulp.task('test', function () {
    return gulp.src(folders.common.concat(folders.example))
        .pipe(babel({
            plugins: ['transform-react-jsx']
        }))
        .pipe(concat('example.js'))
        .pipe(gulp.dest(folders.jsOut));
});

Я знаю, что это не обязательно красиво, но я немного изменил это за последние 48 часов: P

Теперь, в конце, похоже, что файлы правильно комбинируются,Я получаю файл 'example.js' с частями из общего и базового файла.теперь проблема в том, что я не могу заставить его извлекать кусочки, используя require.

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

Я попытался использовать реакцию напрямую, просто удалив ".pipe (babel (.....))."with" .pipe (реагировать ()) "и просто указываю все файлы сразу.

Очевидно, я делаю что-то не так, но все учебники, которые я вижу, имеют разные подходы, и я чувствую, реализуяВ одном из руководств я удаляю то, чему научился у других.

Любая помощь будет оценена. Я немного новичок в этом способе разработки JS, особенно в настройке с gulp.

Спасибо.

...