Эта статья поможет вам быстро начать работу с Rollup.

предисловие

В проекте всегда использовалисьwebpack, в предыдущем абзаце необходимо разработать несколько библиотек классов для использования на других платформах, изначально планировалось продолжать использоватьwebpackда, но чувствуюwebpackразвиватьjsБиблиотека не только громоздка, но и размер файла после упаковки относительно большой. как раз передvueисходный код, знаюvueтакже черезrollupупакованный. На этот раз я снова разработал библиотеку классов, поэтому быстро приступил к работе.rollup.

Эта статья о том, что после того, как у меня будет определенная проектная практика, я вернусь и поделюсь с вами, как быстро начать работу с нуля.rollup.

что`rollup`?

Понимание системыrollupПеред этим кратко разберемсяWhat is rollup？

оrollupВступление к официальному документу написано очень четко:

Rollup — это сборщик модулей JavaScript, который компилирует небольшие фрагменты кода в большие сложные фрагменты кода, такие как библиотеки или приложения.

а такжеWebpackОриентация на упаковку приложений другая,rollup.jsболее сосредоточены наJavascriptУпаковка библиотеки классов.

мы знаемVue,Reactи многие другие известные фреймворки или библиотеки классов.rollup.jsЭто упаковано.

Зачем`rollup`?

webpackЯ считаю, что все, кто изучает интерфейс, использовали его, так почему же в некоторых сценариях он все еще используется?rollupШерстяная ткань? Вот я простоwebpackа такжеrollupсделать сравнение:

В основномwebpackа такжеrollupВ разных сценариях это может играть свои преимущества.webpackОн имеет «врожденные преимущества» для разделения кода и импорта статических ресурсов, а также поддерживает горячую замену модулей (HMR),а такжеrollupНе поддерживается.

Поэтому при разработке приложений вы можете сначала выбратьwebpack,ноrollupдля кодаTree-shakingа такжеES6Модуль имеет поддержку преимуществ алгоритма.Если вашему проекту нужно упаковать только простойbundleпакет и основан наES6разработки модуля, вы можете рассмотреть возможность использованияrollup.

фактическиwebpackот2.0Поддерживается с самого началаTree-shaking, и используяbabel-loaderтакже может поддерживатьes6 moduleупаковка. Фактически,rollupПостепенно он утратил свое первоначальное преимущество. Но его не забросили, а из-за его простотыAPI, метод использования предпочитают многие разработчики библиотек, такие какReact,Vueи так далее, оба используютrollupкак инструмент сборки.

Начать быстро

Давайте потратим около десяти минут, чтобы понятьrollupОсновное использование и завершениеhello world.

Установить

Сначала установите глобальноrollup:

npm i rollup -g

Подготовка каталога (привет, мир)

Затем мы инициализируем каталог проекта, как показано ниже.

├── dist # 编译结果
├── example # HTML引用例子
│   └── index.html
├── package.json
└── src # 源码
    └── index.js

Сначала мыsrc/index.jsНапишите следующий код в:

console.log("柯森");

Затем выполните следующую команду в командной строке:

rollup src/index.js -f umd -o dist/bundle.js

Выполняем команду, мы можемdistсоздается в каталогеbundle.jsдокумент:

(function (factory) {
	typeof define === 'function' && define.amd ? define(factory) :
	factory();
}((function () { 'use strict';

	console.log("柯森");

})));

В это время мыexample/index.htmlПредставить упакованный и сгенерированный вышеbundle.jsфайл, откройте браузер:Как мы и ожидали, вывод консоли柯森.

Здесь мы используемrollupупакован один из самых простыхdemo.

Многие студенты могут не понять параметры в приведенной выше командной строке, когда увидят ее здесь, я объясню в свою очередь:

-f.-fпараметр--formatаббревиатура формата сгенерированного кода,amdзначит принятьAMDстандарт,cjsдляCommonJSстандарт,esm(или es) дляESстандарт модуля.-fЗначение может бытьamd,cjs,system,esm('es' также работает),iifeилиumdлюбой из .
-o.-oПуть вывода указан, здесь мы выводим упакованный файл вdistв каталогеbundle.js

На самом деле, помимо этих двух, есть много других часто используемых команд (здесь я перечислю оставшиеся две, которые также чаще используются, полнаяаргументы командной строки свертки):

-c. уточнитьrollupконфигурационный файл.
-w. Отслеживайте исходный файл на наличие изменений и переупаковывайте, если есть изменения.

Используйте файл конфигурации (`rollup.config.js`)

Используйте способ использования строки, если параметр меньше, но если вы добавите больше параметров, этот способ этой командной строки будет проблематичным.

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

В проекте создайте файл с именемrollup.config.jsфайл, добавьте следующий код:

export default {
  input: ["./src/index.js"],
  output: {
    file: "./dist/bundle.js",
    format: "umd",
    name: "experience",
  },
};

Затем выполняется командная строка:

rollup -c

Открытьdist/bundle.jsфайл, мы обнаружим, что результат такой же, как результат, упакованный с помощью метода командной строки, описанного выше.

Здесь я кратко объясню параметры файла конфигурации:

inputУказывает путь к файлу записи (старая версия — запись, которая устарела)
outputУказывает содержимое выходного файла. Позволяет передать объект или массив. Когда это массив, несколько файлов выводятся последовательно. Он содержит следующее содержимое:
- output.file: путь к выходному файлу (старая версия — dest, которая устарела)
- output.format: Формат выходного файла
- output.banner: Содержимое добавляется в заголовок файла.
- output.footer: содержимое добавляется в конец файла

На данный момент, я полагаю, вы почти началиrollup.

Передовой

Однако этого недостаточно для реальных бизнес-сценариев.

Ниже я представлюrollupНесколько часто используемых плагинов иexternalАтрибуты,tree-shakingмеханизм.

`resolve`плагин

зачем использовать`resolve`плагин

В приведенном выше стартовом случае наш упакованный объект является локальным.jsкод и библиотеки, но в реальной разработке вряд ли все библиотеки расположены локально, большинство из нас пройдетnpmСкачать удаленные библиотеки.

а такжеwebpackа такжеbrowserifyВ отличие от других подобных пакетов,rollupНе уверен, как нарушить правила, чтобы справиться с этими зависимостями. Итак, нам нужно добавить некоторую конфигурацию.

`resolve`использование плагина

Сначала добавьте зависимость к нашему проектуthe-answer, затем изменитеsrc/index.jsдокумент:

import answer from "the-answer";

export default function () {
  console.log("the answer is " + answer);
}

воплощать в жизньnpm run build.

Здесь для удобства яrollup -c -wдобавлен кpackage.jsonизscriptsсередина:"build": "rollup -c -w"

Получит следующую ошибку:упакованныйbundle.jsвсе еще будетNode.jsРабота, ноthe-answerНе входит в комплект. Чтобы решить эту проблему, мы объединили исходный код и зависимую стороннюю библиотеку.rollup.jsпредоставляет намresolveплагин.

Сначала установитеresolveПлагин:

npm i -D @rollup/plugin-node-resolve

Изменить файл конфигурацииrollup.config.js:

import resolve from "@rollup/plugin-node-resolve";

export default {
  input: ["./src/index.js"],
  output: {
    file: "./dist/bundle.js",
    format: "umd",
    name: "experience",
  },
  plugins: [resolve()],
};

Выполнить сноваnpm run build, вы можете обнаружить, что ошибка исчезла:

Открытьdist/bundle.jsдокумент:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.experience = factory());
}(this, (function () { 'use strict';

  var index = 42;

  function index$1 () {
    console.log("the answer is " + index);
  }

  return index$1;

})));

пакетный файлbundle.jsУпомянутые модули уже включены в .

Некоторые сцены, хотя мы использовалиresolveInsert, но, возможно, мы все же хотим, чтобы некоторые библиотеки сохраняли статус внешней ссылки, тогда нам нужно использоватьexternalсвойства, рассказатьrollup.jsКоторые являются внешними библиотеками классов.

внешнее свойство

Исправлятьrollup.jsфайл конфигурации:

import resolve from "@rollup/plugin-node-resolve";

export default {
  input: ["./src/index.js"],
  output: {
    file: "./dist/bundle.js",
    format: "umd",
    name: "experience",
  },
  plugins: [resolve()],
  external: ["the-answer"],
};

перепаковать, открытьdist/bundle.jsдокумент:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('the-answer')) :
  typeof define === 'function' && define.amd ? define(['the-answer'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.experience = factory(global.answer));
}(this, (function (answer) { 'use strict';

  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

  var answer__default = /*#__PURE__*/_interopDefaultLegacy(answer);

  function index () {
    console.log("the answer is " + answer__default['default']);
  }

  return index;

})));

В это время мы видимthe-answerОн был импортирован как внешняя библиотека.

`commonjs`плагин

зачем нужно`commonjs`плагин

rollup.jsСсылки на модули в скомпилированном исходном коде поддерживаются только по умолчанию.ES6+модуль путьimport/export. Однако большое количествоnpmмодуль основан наCommonJSмодульный подход, что приводит к большому количествуnpmМодули не могут быть скомпилированы непосредственно для использования.

таким образом делаяrollup.jsПоддержка компиляцииnpmмодули иCommonJSПоявились плагины в модульном режиме:@rollup/plugin-commonjs.

`commonjs`использование плагина

Сначала установите модуль:

npm i -D @rollup/plugin-commonjs

затем изменитьrollup.config.jsдокумент:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
export default {
  input: ["./src/index.js"],
  output: {
    file: "./dist/bundle.js",
    format: "umd",
    name: "experience",
  },
  plugins: [resolve(), commonjs()],
  external: ["the-answer"],
};

`babel`плагин

зачем нужно`babel`плагин?

мы вsrcдобавить в каталогes6.jsФайл (⚠️ здесь мы используем стрелочные функции из es6):

const a = 1;
const b = 2;
console.log(a, b);
export default () => {
  return a + b;
};

затем изменитьrollup.config.jsКонфигурационный файл:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
export default {
  input: ["./src/es6.js"],
  output: {
    file: "./dist/esBundle.js",
    format: "umd",
    name: "experience",
  },
  plugins: [resolve(), commonjs()],
  external: ["the-answer"],
};

Выполните пакет, вы можете увидетьdist/esBundle.jsСодержимое файла следующее:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.experience = factory());
}(this, (function () { 'use strict';

  const a = 1;
  const b = 2;
  console.log(a, b);
  var es6 = () => {
    return a + b;
  };

  return es6;

})));

Вы видите, что стрелочные функции сохранены, и такой код не поддерживается.ES6среда работать не будет. мы ожидаем вrollup.jsМожет использоваться во время упаковкиbabelдля завершения транскодирования, поэтому нам нужноbabelплагин.

`babel`Использование плагинов

Сначала установите:

npm i -D @rollup/plugin-babel

Также измените файл конфигурацииrollup.config.js:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";

export default {
  input: ["./src/es6.js"],
  output: {
    file: "./dist/esBundle.js",
    format: "umd",
    name: "experience",
  },
  plugins: [resolve(), commonjs(), babel()],
  external: ["the-answer"],
};

Затем упакуйте его и обнаружите, что появится ошибка:намекнуть, что мы пропали@babel/core,потому что@babel/coreдаbabelОсновной. Давайте установим его:

npm i @babel/core

Снова запустите пакет и обнаружите, что на этот раз об ошибке не сообщается, но мы пытаемся открыть его.dist/esBundle.js:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.experience = factory());
}(this, (function () { 'use strict';

  const a = 1;
  const b = 2;
  console.log(a, b);
  var es6 = (() => {
    return a + b;
  });

  return es6;

})));

Можно обнаружить, что стрелочная функция все еще существует, что явно неверно, указывая на то, что нашаbabelПлагин не работал. Почему это?

Причина в том, что нам не хватает.babelrcДокумент, добавьте этот файл:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        // "useBuiltIns": "usage"
      }
    ]
  ]
}

Давайте посмотрим.babelrcнастроенpreset env, поэтому сначала установите этот плагин:

npm i @babel/preset-env

На этот раз, чтобы снова выполнить упаковку, мы открываемdist/esBundle.jsдокумент:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.experience = factory());
}(this, (function () { 'use strict';

  var a = 1;
  var b = 2;
  console.log(a, b);
  var es6 = (function () {
    return a + b;
  });

  return es6;

})));

Вы можете видеть, что функция стрелки преобразуется вfunction, проиллюстрироватьbabelПлагин работает нормально.

`json`плагин

зачем использовать`json`плагин?

существуетsrcСоздано в каталогеjson.jsдокумент:

import json from "../package.json";
console.log(json.author);

Содержание очень простое, это ввестиpackage.json, Затем перейти к печатиauthorполе.

Исправлятьrollup.config.jsКонфигурационный файл:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";

export default {
  input: ["./src/json.js"],
  output: {
    file: "./dist/jsonBundle.js",
    format: "umd",
    name: "experience",
  },
  plugins: [resolve(), commonjs(), babel()],
  external: ["the-answer"],
};

Запустите пакет и обнаружите, что произойдет следующая ошибка:намекнуть, что мы пропали@rollup/plugin-jsonплагин для поддержкиjsonдокумент.

`json`Использование плагинов

для установки плагина:

npm i -D @rollup/plugin-json

Также измените файл конфигурации и добавьте плагинpluginsМассив подойдет.

Затем снова упаковываем и обнаруживаем, что упаковка прошла успешно, открываем сгенерированныйdist/jsonBundleсодержание:

(function (factory) {
  typeof define === 'function' && define.amd ? define(factory) :
  factory();
}((function () { 'use strict';

  var name = "rollup-experience";
  var version = "1.0.0";
  var description = "";
  var main = "index.js";
  var directories = {
  	example: "example"
  };
  var scripts = {
  	build: "rollup -c -w",
  	test: "echo \"Error: no test specified\" && exit 1"
  };
  var author = "Cosen";
  var license = "ISC";
  var dependencies = {
  	"@babel/core": "^7.11.6",
  	"@babel/preset-env": "^7.11.5",
  	"the-answer": "^1.0.0"
  };
  var devDependencies = {
  	"@rollup/plugin-babel": "^5.2.0",
  	"@rollup/plugin-commonjs": "^15.0.0",
  	"@rollup/plugin-json": "^4.1.0",
  	"@rollup/plugin-node-resolve": "^9.0.0"
  };
  var json = {
  	name: name,
  	version: version,
  	description: description,
  	main: main,
  	directories: directories,
  	scripts: scripts,
  	author: author,
  	license: license,
  	dependencies: dependencies,
  	devDependencies: devDependencies
  };

  console.log(json.author);

})));

Идеально! !

`tree-shaking`механизм

Здесь мы начинаем сsrc/index.jsВ качестве примера для иллюстрации:

import answer from "the-answer";

export default function () {
  console.log("the answer is " + answer);
}

Измените вышеуказанный файл:

const a = 1;
const b = 2;
export default function () {
  console.log(a + b);
}

Выполнить упаковку. Открытьdist/bundle.jsдокумент:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.experience = factory());
}(this, (function () { 'use strict';

  var a = 1;
  var b = 2;
  function index () {
    console.log(a + b);
  }

  return index;

})));

редактировать сноваsrc/index.jsдокумент:

const a = 1;
const b = 2;
export default function () {
  console.log(a);
}

Запустите пакет еще раз и откройте файл пакета:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.experience = factory());
}(this, (function () { 'use strict';

  var a = 1;
  function index () {
    console.log(a);
  }

  return index;

})));

Нашел что?

Мы обнаружили, что о переменнойbОпределение пропало, потому что эта переменная не используется в исходном коде. ЭтоESмодуль известныйtree-shakingМеханизм, он динамически удаляет неиспользуемый код, делая код более оптимизированным, чтобы наша библиотека классов могла получить более высокую скорость загрузки.

Суммировать

В этой статье кратко рассказывается, что такоеrollupи как быстро начатьrollup. На самом деле это только вершина айсберга.rollupЕсть еще много вещей, чтобы играть, о большем вы можете перейти кофициальный сайт перепрошивкиЗапрос

❤️ любовь тройная

1. Если вы считаете, что эта статья неплохая, заходите сюдаДелитесь, лайкайте, смотритеСанлиан, пусть больше людей увидят это~

2. Подпишитесь на официальный аккаунтпередний лес, регулярно снабжаем вас свежими и галантереями и хорошими товарами.

3. На спецучастках носите маску и пользуйтесь средствами индивидуальной защиты.

предисловие

чтоrollup?

Зачемrollup?

Начать быстро

Установить

Подготовка каталога (привет, мир)

Используйте файл конфигурации (rollup.config.js)

Передовой

resolveплагин

зачем использоватьresolveплагин

resolveиспользование плагина

внешнее свойство

commonjsплагин

зачем нужноcommonjsплагин

commonjsиспользование плагина

babelплагин

зачем нужноbabelплагин?

babelИспользование плагинов

jsonплагин

зачем использоватьjsonплагин?

jsonИспользование плагинов

tree-shakingмеханизм