Рубрики
Без рубрики

Rect JS и браурифицировать рабочий процесс (часть 1)

Эта статья предоставит вам подробный рабочий процесс для создания приложения Ready Ready ReactJS.

Автор оригинала: Christian Alfoni.

Эта статья предоставит вам подробный рабочий процесс для создания приложения Ready Ready ReactJS. Это было первоначально опубликовано на Кодаментар Christian Alfoni’s Блог Отказ

Я работаю с Реагировать js На несколько дней, и я должен сказать, что я впечатлен. Вы не можете сравнить его с полными каркасами, такими как Угловые js или Ember JS , но в то же время стоит упомянуть в том же контексте. Полная структура увеличивает скорость вашего развития и представляет собой мечту, когда речь идет о прототипировании, но построение высокопроизводительного веб-приложения легче, когда вы контролируете каждую часть. Больше на этом в более позднем посте давайте погрузимся в то, как я нашел идеальный способ работать с React JS.

Обновление: Я обновил Boaterplate с лучшей тестированием и лучшим обращением за зависимостями. Писал об этом здесь, React JS и браузерифицировать рабочий процесс, часть 2 Отказ

Проблема

Я действительно не ценю простоту примеров, показанных на, вероятно, все объекты библиотеки/рамки. Никто не создает приложение в глобальном объеме, никто не создает приложение в одном файле, и все хотят сделать свой код добычей. Реагировать js Сайт ничем не отличается, и мне потребовалось много времени, создавая хороший рабочий процесс. Это то, что мне нужно:

  • Напишите JSX (Формат js js javascript) и преобразовать его на регулярный JavaScript на лету
  • Напишите мой код в модульном шаблоне
  • Используйте React JS Chrome Dev Tool
  • Соедините мой JavaScript и используйте исходные карты для отладки
  • Запустите другие задачи по изменению файлов, такие как CSS Concat и т. Д.
  • Это должно быть крайне быстро

Этот пост пройдет каждый шаг, который я сделал, чтобы найти решение. Если вы просто хотите решение, прыгайте вперед в раствор внизу.

Первая попытка

Поэтому моя первая задача состояла в том, чтобы решить преобразование JSX на лету. Глядя на React JS Guide Я быстро выяснил, что единственное, что мне нужно было включить дополнительный тег скрипта в моем HTML. Это решает мою проблему, но это не то, что я ищу. Дополнительный тег скрипта – это не то, что вы хотите поставить в производство, поэтому мне нужно предварительно преобразовывать мои файлы, содержащие JSX.

Вторая попытка

Как React JS Guide Государства, вы можете установить Реагистрационные инструменты Во всем мире и используйте инструмент командной строки, чтобы посмотреть файлы и преобразовывать их. Это решает мою проблему, но это преобразует каждый отдельный файл и помещает его в другую папку. Это создаст грязную структуру проекта. Мне нужно было изменить мою стратегию! Я решил посмотреть на некоторые инструменты модуля вместо этого им придется поддерживать преобразование JSX в любом случае.

Третья попытка

Иметь немного опыта с требования Я думал, что это будет хорошая ставка, но стало более сложным, чем я изначально подумал. Отличная работа была сделана на этом плагине: JSX-TICESJS-PLUCKIN , но вы получаете дополнительные зависимости, такие как плагин «Text» для EMENJS, и вы должны использовать модифицированную версию «JSXTransformer», которая не чувствует себя хорошо. Была также проблема с объединением всего проекта на каждом изменении файла, оно было слишком медленно.

Четвертая попытка

Лично я никогда не пробовал Брасифицировать раньше, но у меня не хватало вариантов. Оказывается, что браурификация довольно потрясающая, это позволяет писать синтаксис узла в файлах JavaScript. Результатом этого является то, что вы получаете модули и возможность повторно использовать ваши файлы JSX в узле. Это очень хорошая вещь, потому что Реагировать js Позволяет на стороне сервера компилировать HTML и отправить строку клиенту для дальнейшей обработки на боковой версии клиента библиотеки.

Что тоже хорошо о Брасифицировать это то, что у вас есть плагин под названием смотреть Это будет кэшировать ваш проект и просмотреть его для изменений, делая только необходимое повторное соединение на обновлениях. Он плакатно быстро! Так как я привык к Грунт Я пытался использовать Брюнт-брауризация и Grunt-Watchify задачи. Это сработало довольно хорошо, хотя я не мог получить зорс на работу. Но еще большая проблема заключалась в том, что мне нужно было не только посмотреть файлы JavaScript для изменений, мне также необходимо объединить мои файлы CSS.

После некоторых исследований я нашел Грунт-параллельный Задача, которая позволила бы мне запустить две задачи Parallell Watch. Это сработало, но это было медленно. И я до сих пор не мог получить моющную работу на работу.

Пятая попытка

Так что я использовал Грунт был слишком медленным, как насчет Гульп ? Сейчас Гульп это инструмент сборки, как Грунт , только он передает процесс, чтобы вы могли манипулировать процессом сборки в памяти вместо того, чтобы создавать временные файлы, которые подбираются следующим шагом в процессе сборки.

Поиск в Интернете для решения для Гульп Я ударил это пост на стойке. Он показывает несколько решений для одной и той же проблемы, и путь вниз я нашел пример, который также обрабатывал преобразование JSX с реагировать У него были несколько шагов, которые я не понял. Почему все это требуют вещи? И зачем нужен конкретный файл rest.js? Это немного хакей. Это также дало мне ошибку, когда я запустил его в браузере.

Это привело меня к использованию Gulp-Browserify который работал красиво. Но как насчет смотреть часть? Поиск Gulp-Watchify Он утверждает: «Экспериментальный». Это не чувствует себя правильно, так как я мог бы получить этот материал для работы? Поиск в Интернете снова я нашел следующее утверждение: «Gulp-Browserify был заблокирован в черный список». Дох!, Что сейчас?

Шестая попытка

Иногда вам просто нужно сделать это с нуля. Используя то, что я испытал до сих пор, я построил свой собственный процесс сборки, используя Брасифицировать , смотреть и реагировать NPM модули. Я был рад видеть это Гульп Также обрабатывается, наблюдая за моими CSS для одной задачи и что смотреть Задача в параллелле без каких-либо проблем.

Решение

Так вот как мой Gulpfile.js Файл выглядит как:

var gulp = require('gulp');
var source = require('vinyl-source-stream'); // Used to stream bundle for further handling
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify'); 
var concat = require('gulp-concat');
 
gulp.task('browserify', function() {
    var bundler = browserify({
        entries: ['./app/main.js'], // Only need initial file, browserify finds the deps
        transform: [reactify], // We want to convert JSX to normal javascript
        debug: true, // Gives us sourcemapping
        cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
    });
    var watcher  = watchify(bundler);

    return watcher
    .on('update', function () { // When any files update
        var updateStart = Date.now();
        console.log('Updating!');
        watcher.bundle() // Create new bundle that uses the cache for high performance
        .pipe(source('main.js'))
    // This is where you add uglifying etc.
        .pipe(gulp.dest('./build/'));
        console.log('Updated!', (Date.now() - updateStart) + 'ms');
    })
    .bundle() // Create the initial bundle when starting the task
    .pipe(source('main.js'))
    .pipe(gulp.dest('./build/'));
});

// I added this so that you see how to run two watch tasks
gulp.task('css', function () {
    gulp.watch('styles/**/*.css', function () {
        return gulp.src('styles/**/*.css')
        .pipe(concat('main.css'))
        .pipe(gulp.dest('build/'));
    });
});

// Just running the two tasks
gulp.task('default', ['browserify', 'css']);

Итоги, чтобы обобщить:

  • Напишите JSX и преобразуйте его на регулярный JavaScript на лету (Решено)
  • Напишите мой код в модульном шаблоне (Решено)
  • Используйте React JS Chrome Dev Tool
  • Соедините мой JavaScript и используйте исходные карты для отладки (Решено)
  • Запустите другие задачи по изменению файла, такие как CSS Concat и т. Д. (Решено)
  • Это должно быть чрезвычайно быстрым (Решено)

Как насчет реагирования dev-tools?

Реагировать DEV-Tools Нужен экземпляр реагирования JS Lib в глобальном масштабе для запуска. Чтобы исправить это, вам просто нужно добавить его в свой main.js файл.

/** @jsx React.DOM */

var React = require('react');
// Here we put our React instance to the global scope. Make sure you do not put it 
// into production and make sure that you close and open your console if the 
// DEV-TOOLS does not display
window.React = React; 

var App = require('./App.jsx');
React.renderComponent(, document.body);

Так что это было мое путешествие. Я действительно надеюсь, что люди на Facebook поставили пример этого на объекте React JS. Реагирование JS действительно удивительно и очень грустно, если люди оставляют это, потому что это такая боль, создавая хороший рабочий процесс. До этого не стесняйтесь использовать приложение BoaterPlate, которое я установил, который также обрабатывает тестирование: React-App-Boilerplate Отказ

Спасибо за слушать мою историю и веселиться с Реагировать js !

Читайте ещё по теме: