Дневник разработчиков: Gulp + rollup.js

Оставить наследство на прежнем месте работы - добродетель, к которой стоит стремиться. Мир технологий быстро развивается. Считайте, что вас ценят, когда ценят документацию, рабочие процессы и фреймворки спустя годы после вашего отъезда. Товарищ по команде ушел несколько месяцев назад, и мы все еще используем ресурсы и инструменты, которые он собрал и сконструировал. Фактически, многие из его старых рабочих процессов и фрагментов кода начинают внедряться в наш повседневный рабочий процесс. Один из них - rollup.js.

Давно прошли те времена, когда сложные виджеты JavaScript создавались в одном длинном файле - функции и переменные разбросаны по сторонам, что затрудняло поиск при прокрутке. При включенном свертке JavaScript можно разделить на разные файлы; и когда он готов к отправке в производство, свертка игнорирует неиспользуемый код, что может привести к заметно меньшим размерам файлов. По этим причинам мы благодарны за то, что наследие нашего бывшего сотрудника продолжает жить.

Давайте начнем!

Полная суть и подробности ниже.

В package.json было добавлено новое дополнение - файл, содержащий все детали проекта, например, автора, название проекта, дату запуска. По умолчанию для всех устаревших проектов для Rollup установлено значение false. Разработчик может выбрать включение накопительного пакета при необходимости.

...
"rollup": true,
...

Следующий фрагмент кода ниже читает содержимое из package.json.

// package.json contains information about project 
// no try catch - fail dramatically if package.json is not present
const pkgAll = fs.readFileSync('./../../package.json', 'utf8');

Если для rollup установлено значение false, срабатывает традиционное выражение функции.

// developer choosing old school approach
const traditional = function(order) {
  // see if developer needs js files compiled in a specific order
  const queuedJavaScript = orderOfJavaScript(order);
  // then add all other JS files
  queuedJavaScript.push('src/**/*.js');
  return gulp.src(queuedJavaScript)
    .pipe(eslint())
    .pipe(plumber())
    .pipe(notify(reportErrorsForJavaScript))
    .pipe(eslint.format());
};

Если установлено значение true, срабатывает newThreads.

// rollup setup
const newThreads = function( src ) {
  // fail dramatically if _rollup.js is not present
  fs.readFileSync( 'src/_rollup.js', 'utf8' );
  // get rolling
  return rollup({
    input: src, // look at this specific file src/_rollup.js
    format: 'iife', // automatically encapsulates code in an iife and invokes strict mode
    sourcemap: true, // locate the line number where the issue is occurring
    plugins: [
      eslintRollup({
        "parserOptions": {
          "sourceType": "module" // tell ESLint ES6 modules are in play
        }
     })
    ]
  })
  // point to the entry file again
  .pipe(source(src))
  // output the buffer, rollup doesn't support streams
  .pipe(buffer());
};

newThreads рассчитывает, что будут доступны следующие четыре пакета…

const rollup = require('rollup-stream');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const eslintRollup = require('rollup-plugin-eslint');

Но перед запуском newThreads или традиционного тернарный сервер решает, использовать ли объединение или перейти на старую школу.

// if rollup in play throw on some new threads
// otherwise go old school
return (  pkg.rollup ? newThreads('src/_rollup.js') : traditional(pkg.orderofjavascript)  )

И последнее, но не менее важное: для Вавилон установлено значение false. Тогда Babel не будет преобразовывать модули самостоятельно. Фух!

.pipe(babel({
  "presets": [
    ["env", {
      "targets": {
        "browsers": config.sass.settings
      },
      "modules": false
    }]
  ]
}))

Вот и все!

_rollup.js выглядит так…

import { foo } from './module-name-here/foo.js';
foo();

… Foo.js выглядит как…

export function foo() {
  const type = 'fruit';
  return console.log('a pear is a', type);
}

… И после запуска Gulp создается следующее…

(function () {
  'use strict';
  function foo() {
    var type = 'fruit';
    return console.log('a pear is a', type);
  }
  foo();
})();
//# sourceMappingURL=main.js.map

Отлично!

ESlint сообщил об ошибке в строке 3…

…src/module-name-here/foo.js
3:9 error Unexpected console statement no-console

… И Chrome смог понять исходную карту…

a pear is a fruit foo.js:3

… Поиск фактического файла разработки в журнале консоли.

Милая!

Заключение

Технологии и рабочие процессы постоянно меняются. Rollup обязательно останется, но только время покажет. Что касается мудрости, которой поделился наш бывший коллега, его наследие, скорее всего, охватит поколения разработчиков, работающих здесь.

Делать

• Переместите newThreads и традиционный в их собственные файлы.
• Улучшение уведомлений, когда src / _rollup.js не найден.
• Создайте документацию.

Отказ от ответственности: Дневник разработчиков пишется каждый день, и предыдущие статьи не обновляются. Код может работать сегодня, но завтра будут обнаружены глюки. Проявите должную осмотрительность и тщательно протестируйте любой созданный здесь код, прежде чем внедрять его в свой собственный проект. Удачи!