Продолжаем параллельное сравнение с учетом языковых функций и мультимедиа.

Это часть серии, начинающейся с React: Bake from Scratch or Box (JavaScript Version): Part 1; параллельное сравнение создания приложений React с использованием специализированного решения для сборки (с нуля) и использования Create React App (из поля).

Раунд 4: особенности языка

Одна из неприятных вещей для новичков в JavaScript - это головокружительная эволюция языка; с новым выпуском каждый год, начиная с 2015 года.

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

Раунд 4: особенности языка - скретч

примечание: окончательная версия (этого раунда) решения для сборки на заказ доступна для загрузки из ветви language-features пакета webpack- скретч-бокс репозиторий.

Предустановка Babel по умолчанию, @ babel / preset-env, автоматически включает последние выпуски. Однако он не включает две часто используемые предлагаемые функции.

К счастью, добавить поддержку этих функций несложно:

npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/plugin-syntax-dynamic-import

и обновите конфигурацию Babel (.babelrc)

{
  ...
  "plugins": [
    ...
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

Раунд 4: языковые особенности - поле

Create React App включает поддержку всех последних выпусков, а также двух предложений.

Раунд 4: особенности языка - сравнение

Одним из больших преимуществ Create React App является то, что они внимательно следят (если не ведут) за тем, какие функции JavaScript приняты сообществом React. Они также предоставляют механизм для обновления существующих проектов последними версиями.

Раунд 5: СМИ

Одна явно недостающая особенность нашего решения для сборки на заказ - это поддержка мультимедиа, то есть изображений и шрифтов.

Обычное поведение - возможность импортировать изображения так же, как и модуль JavaScript. Импортированное значение - это URL-адрес, который можно использовать в качестве источника (в HTML или CSS).

...
import cat from './cat.jpg';
const App = () => (
  <div>
    <div>Hello World</div>
    <div>
      <img src={cat} alt="cat" />
    </div>
  </div>
);
...

Также часто этот URL-адрес является URL-адресом данных (обслуживается из пакета JavaScript), если изображение ниже определенного порогового размера; в противном случае это относительный URL-адрес файла с именем, основанным на хеш-коде изображения (используется для поддержки долгосрочного кэширования - мы рассмотрим это позже).

С другой стороны, шрифты всегда предоставляются как относительный URL-адрес файла с именем на основе хэша файла шрифта.

Раунд 5: СМИ - царапина

примечание: финальная версия (этого раунда) специализированного решения для сборки доступна для загрузки из ветки media webpack-scratch- box репозиторий.

Чтобы реализовать этот медиа-подход, мы сначала устанавливаем зависимости:

npm install --save-dev file-loader
npm install --save-dev url-loader

И обновите webpack.config.js:

...
const config = env => ({
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: 'file-loader',
      },
    ],
  },
  ...
});
...

Раунд 5: Медиа - Коробка

Create React App поддерживает эти мультимедийные функции из коробки; Добавление изображений, шрифтов и файлов.

Create React App также поддерживает механизм крайнего случая для обработки мультимедиа, Использование общей папки. Хотя мы не реализовали это в нашем специально разработанном решении для сборки, его можно было бы легко включить с помощью copy-webpack-plugin.

Раунд 5: СМИ - сравнение

Неудивительно, что обработка мультимедиа имеет довольно простую реализацию как в нашем специализированном решении для сборки, так и в Create React App.

Дальнейшие действия

В следующей статье React: Bake from Scratch or Box (JavaScript Version): Part 5 мы продолжим параллельное сравнение, рассмотрев стили.