Упаковка JavaScript с Rollup

Node.js JavaScript Babel rollup.js

title

rollup — это небольшой инструмент для упаковки модулей javascript, который больше подходит для создания инструментов для библиотечных приложений, он может компилировать небольшие блоки кода в большой и сложный код, основанный на модулях ES6, он может минимизировать ваш пакет и эффективно уменьшить количество запросов к файлам. ,vueЯ использовал webpack для разработки, но в конце концов для упаковки файлов использовался rollup.js.

впервые опубликовано вличный блог

Установить глобально

npm install --global rollup

Начните с объединения

Создайте первый пакет

Создайтеmain.js

console.log(111);

воплощать в жизньrollup --input main.js --output bundle.js --format cjs, команда компилируетсяmain.jsгенерироватьbundle.js, --format cjsСредства, упакованные как код среды node.js, обратите внимание на содержимое файла bundle.js.

'use strict'
console.log(111);

Знакомство с параметрами командной строки:

ввод (ввод -i/--ввод)

String Точка входа этого пакета (например, ваш main.js или app.js или index.js)

файл (файл -o/--output.file) String Файл для записи. Также может использоваться для создания исходных карт, если применимо.

формат (формат -f/--output.format) О варианте формата rollup предлагает пять вариантов:

  • amd — определение асинхронного модуля для использования в загрузчиках модулей, таких как RequireJS.
  • cjs — CommonJS, для Node и Browserify/Webpack
  • es — сохранить пакет как файл модуля ES
  • iife — автоматически выполняющаяся функция, подходящая как<script>Этикетка. (Если вы создаете пакет для своего приложения, вы можете использовать это, так как это уменьшит размер файла.)
  • umd — универсальное определение модуля, интегрированное с amd, cjs и iife.

Использовать файлы конфигурации

rollup.config.js

export default {
    input: 'src/main.js',
    output: {
        file: 'bundle.js',
        format: 'cjs'
    }
};

воплощать в жизньrollup -c rollup.config.jsэлементы конфигурации запуска;

rollup предоставляет параметры --watch / -w для отслеживания изменений файлов и автоматической переупаковки

Воспользуйтесь подключаемым модулем сворачивания

npm install --save-dev rollup-plugin-json

Мы используем --save-dev вместо --save, потому что фактическое выполнение кода не зависит от этого плагина — он используется только при упаковке.

Включить плагины в конфигурационном файле

import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    plugins: [
        json(),
    ],
}

создать новый файлdata.json

{
    "name": "xiaoming",
    "age": 12
}

существуетmain.jsпредставлятьdata.json

import { name } from './data.json';
console.log(name);

воплощать в жизньrollup -c rollup.config.jsи см. bundle.js

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

var name = "xiaoming";

console.log(name);

})));

Видя, что в пакете упоминается только поле имени в data.json, это связано с тем, что свертка автоматически выполнит Tree-shaking, в main.js вводится только имя, а возраст не упоминается, поэтому возраст не будет упакован.

накопительный базовый плагин

  • rollup-plugin-alias: Обеспечьте псевдонимы и функции reslove для имен модулей.
  • rollup-plugin-babel: Обеспечьте способность Babel
  • rollup-plugin-eslint: Предоставление возможностей eslint
  • rollup-plugin-node-resolve: разрешить модули в node_modules
  • rollup-plugin-commonjs: конвертировать CJS -> ESM, обычно используется с вышеуказанным плагином.
  • rollup-plugin-serve: Аналогично webpack-dev-server, предоставляет возможности статического сервера.
  • rollup-plugin-filesize: показать размер файла пакета
  • rollup-plugin-uglify: сжатый пакетный файл
  • rollup-plugin-replace: по аналогии с DefinePlugin Webpack, его можно использовать в исходном коде, чтобы различать среды разработки и производства через process.env.NODE_ENV.

интеграция с другими инструментами

Упаковка модулей npm

В отличие от webpack и Browserify, накопительный пакет не будет искать пакеты, установленные из npm, в вашу папку node_modules;rollup-plugin-node-resolveПлагины могут указать Rollup, как искать внешние модули

npm install --save-dev rollup-plugin-node-resolve

Упаковка модулей commonjs

Большинство пакетов в npm представлены в виде модулей CommonJS. Прежде чем они изменятся, нам нужно преобразовать модули CommonJS в ES2015 для обработки Rollup.rollup-plugin-commonjsПлагины используются для преобразования CommonJS в модули ES2015. осторожность,rollup-plugin-commonjsСледует использовать до того, как другие плагины преобразовывают ваши модули — это необходимо, чтобы изменения других плагинов не нарушали обнаружение CommonJS.

npm install --save-dev rollup-plugin-commonjs

использовать вавилон

Самый простой способ использовать Babel и Rollup — использовать rollup-plugin-babel.

npm install --save-dev rollup-plugin-babel

Новый.babelrc

{
    "presets": [
        ["latest", {
            "es2015": {
                "modules": false
            }
        }]
    ],
    "plugins": ["external-helpers"]
}
  • Во-первых, мы устанавливаем"modules": false, в противном случае Babel преобразует наш модуль в CommonJS до того, как Rollup сможет его обработать, что приведет к сбою некоторых процессов обработки Rollup.
  • Мы используемexternal-helpersПлагин, который позволяет Rollup ссылаться на «помощников» только один раз в верхней части пакета, а не в каждом модуле, который их использует (это поведение по умолчанию) Перед запуском накопительного пакета его необходимо установитьlatest presetа такжеexternal-helpersплагин
npm i -D babel-preset-latest babel-plugin-external-helpers

Простой элемент конфигурации

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import json from 'rollup-plugin-json';
export default {
    input: './main.js',
    output: {
        file: 'bundle.js',
        format: 'umd'
    },
    watch: {
        exclude: 'node_modules/**'
    },
    plugins: [
        resolve(),
        commonjs(),
        json(),
        babel({
            exclude: 'node_modules/**',
            plugins: ['external-helpers'],
        }),
    ],
}

накопительное преимущество

  • Автоматическое встряхивание деревьев (встряхивание деревьев, также известное как «включение живого кода», — это процесс исключения кода, который на самом деле не используется в данном проекте, но может быть более эффективным).
  • Быстрая упаковка
  • Простая конфигурация

rollup VS webpack

накопительный пакет больше подходит для создания библиотек javascript, а также может использоваться для создания большинства приложений, но накопительный пакет не поддерживает некоторые специфические дополнительные функции, особенно при создании некоторых приложений, особенно разделение кода и динамический импорт динамического импорта во время выполнения. эти возможности в вашем проекте, webpack больше подходит;

Категории