Что такое накопительный пакет (упаковщик модулей ES следующего поколения), пожалуйста, ознакомьтесь с введением на официальном веб-сайте.rollupjs.org/guide/en/
Будьте осторожны, не смотрите на китайский сайт Rollup.js, потому что он переведен другими, а не обновляется в режиме реального времени, я всегда вижу эту ошибку установки раньше
Я уже встречал в Интернете соответствующие варианты использования накопительных пакетов.Некоторые статьи очень концептуальны и трудны для понимания и не содержат конкретных шагов, некоторые статьи недостаточно подробны и не содержат подробностей. Поэтому я планирую организовать статью, чтобы сократить обходы для опоздавших. Я гарантирую, что эта статья действительно является практическим обучением, очень обоснованным, потому что я пишу статью, создавая проект, используя его, а не код в конкретном проекте, поэтому код ясен и нет избыточности.
Почему бы не использовать вебпак
Когда дело доходит до инструментов для упаковки, все думают о веб-пакете, потому что все шаблоны vue и react, которые мы используем, основаны на веб-пакете.У него есть различные загрузчики, которые помогают нам решать различные проблемы.Это очень эффективно для проектов разработки, но он сам сгенерированный код имеет много логического кода, который мы не писали, например некоторые собственные функции загрузки модулей:
Если вы хотите разработать js-библиотеку, громоздкость веб-пакета и размер упакованных файлов неприменимы. Если есть необходимость, есть инструмент, поэтому генерируется роллап для разработки библиотеки js.
Rollup Generate Code Просто поставьте наш код, транскодированный в целевые js, а не другие, и при необходимости, в то же время он может помочь нам генерировать поддержку COMBD / COMBESJS / ES CODE JS, Vue / Rection / Angular использует его в качестве упаковочных инструментов. Проверьте их официальный код сайта можно увидеть тень свертывания.
Быстрый старт
1. Новое строительство
Создайте новую пустую папку, например rollupConfigDemo.
2. Установите накопительный пакет
Откройте проект с помощью vscode и выполните команду для установки
cnpm install rollup --save-dev
После выполнения мы обнаружили, что проект автоматически создал некоторые файлы, и увидели, что в пакете есть накопительный пакет.
Добавьте gitignore, чтобы игнорировать файлы, которые не должны быть загружены
3. Создайте файл rollup.config.js
Мы также можем использовать команду cli для упаковки напрямую без файла конфигурации, но если добавить дополнительные параметры, этот метод командной строки становится громоздким. Для этого мы можем создать файлы конфигурации, чтобы включить нужные параметры. Файлы конфигурации написаны на JavaScript, который более гибок, чем CLI. (Пожалуйста, ознакомьтесь с введением на официальном веб-сайте для упаковки команд cli)
4. Напишите файлы для упаковки
1. Создайте новую папку src и создайте новый файл main.js (запись приложения).
2. Создайте новую папку модулей (представляющую файлы модулей)
Роль модулей состоит в том, чтобы отличать модули от основной записи.В модулях вы можете создать структуру каталогов файлов в соответствии с вашей собственной библиотекой js.
5. Напишите package.json в командах упаковки
6. Выполните npm run build, чтобы просмотреть вывод файла.
Мы видим, что вывод очень четкий, нет лишнего кода типа webpack
7. Используйте упакованный файл
После открытия этой страницы мы видим всплывающее содержимое Hello from Rollup
Общая конфигурация
Краткое описание элементов конфигурации
1.input
Адрес входного файла
2.output
output:{
file:'bundle.js', // 输出文件
format: 'cjs, // 五种输出格式：amd / es6 / iife / umd / cjs
name:'A', //当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下：window.A=...
sourcemap:true //生成bundle.map.js文件，方便调试
}
3.plugins
Конфигурации, используемые различными плагинами
4.external
external:['lodash'] //告诉rollup不要将此lodash打包，而作为外部依赖
5.global
global:{
'jquery':'$' //告诉rollup 全局变量$即是jquery
}
Прикрепите накопительный файл конфигурации проекта с открытым исходным кодом react-redux.
import nodeResolve from 'rollup-plugin-node-resolve' // 帮助寻找node_modules里的包
import babel from 'rollup-plugin-babel' // rollup 的 babel 插件，ES6转ES5
import replace from 'rollup-plugin-replace' // 替换待打包文件里的一些变量，如process在浏览器端是不存在的，需要被替换
import commonjs from 'rollup-plugin-commonjs' // 将非ES6语法的包转为ES6可用
import uglify from 'rollup-plugin-uglify' // 压缩包
const env = process.env.NODE_ENV
const config = {
input: 'src/index.js',
external: ['react', 'redux'], // 告诉rollup，不打包react,redux;将其视为外部依赖
output: {
format: 'umd', // 输出 ＵＭＤ格式，各种模块规范通用
name: 'ReactRedux', // 打包后的全局变量，如浏览器端 window.ReactRedux
globals: {
react: 'React', // 这跟external 是配套使用的，指明global.React即是外部依赖react
redux: 'Redux'
}
},
plugins: [
nodeResolve(),
babel({
exclude: '**/node_modules/**'
}),
replace({
'process.env.NODE_ENV': JSON.stringify(env)
}),
commonjs()
]
}
if (env === 'production') {
config.plugins.push(
uglify({
compress: {
pure_getters: true,
unsafe: true,
unsafe_comps: true,
warnings: false
}
})
)
}
export default config
Углубленное использование
1. Используйте Вавилон
Чтобы правильно разобрать наш модуль и сделать его совместимым со старыми браузерами, мы должны включить babel для компиляции вывода. Многие разработчики используют Babel в своих проектах, чтобы использовать будущие версии функций JavaScript, которые не поддерживаются браузерами и Node.js.
1.1 Установите rollup-plugin-babel
cnpm install rollup-plugin-babel --save-dev
1.2 Настройка rollup.config.js
1.3 Добавьте файл конфигурации Babel .babelrc
Добавьте .babelrc в папку src
В этой установке есть что-то необычное.
Во-первых, мы устанавливаем «modules»: false , иначе Babel преобразует наши модули в CommonJS до того, как Rollup сможет это сделать, что приведет к сбою некоторых процессов Rollup.
Во-вторых, мы помещаем файл .babelrc в src, а не в корневой каталог. Это позволяет нам иметь разные конфиги .babelrc для разных задач, например тестов, если они нам понадобятся позже — обычно лучше иметь отдельные конфиги для отдельных задач.
1.4 Установите @babel/core и @babel/preset-env
@babel/core — это ядро babel, мы видим, что babelrc настроен с предустановленной env, поэтому нам нужно установить эти два плагина.
cnpm install @babel/core @babel/preset-env --save-dev
После установки видим содержимое пакета package
Наконец, запустив npm run build, мы видим, что содержимое упакованного файла было преобразовано в синтаксис es5 синтаксисом es6 после преобразования babel.
2. Ссылка на модуль node
В какой-то момент ваш проект может зависеть от пакетов, установленных из NPM в папку node_modules.
В отличие от других сборщиков, таких как Webpack и Browserify, Rollup не знает, как обрабатывать эти зависимости «из коробки» — нам нужно добавить некоторую конфигурацию плагина.
Ссылки на модули в скомпилированном исходном коде rollup.js по умолчанию поддерживают только импорт/экспорт модуля ES6+. Однако большое количество модулей npm основано на модульном методе CommonJS, что приводит к большому количеству модулей npm, которые нельзя напрямую скомпилировать и использовать. Поэтому появились плагины, которые помогают компилировать rollup.js для поддержки модулей npm и модулей CommonJS.
- Плагин rollup-plugin-node-resolve позволяет нам загружать сторонние модули
- Плагин @rollup/plugin-commons для преобразования их в версию ES6.
2.1 Установите @rollup/plugin-node-resolve и @rollup/plugin-commonjs
cnpm install @rollup/plugin-node-resolve @rollup/plugin-commonjs --save-dev
Если вы установили rollup-plugin-commonjs, вам будет предложено после установки
Означает, что этот пакет устарел и больше не поддерживается. Пожалуйста, используйте @rollup/plugin commonjs.
Если вы установили rollup-plugin-node-resolve, вы также можете столкнуться с этой ситуацией, решение аналогичное. Английский официальный сайт использует @rollup/plugin-node-resolve и @rollup/plugin-commonjs.
Содержимое пакета после установки
2.2 Настройка Rollup.config.js.
2.3 Использование сторонней библиотеки lodash
cnpm install lodash --save-dev
Откройте src/main.js и используйте lodash
Выполнив npm run build, мы видим, что в запакованных файлах гораздо больше содержимого, это коды ладаша, которые запакованы и интегрированы нами.
Откройте веб-страницу для просмотра вывода
2.4 Дополнительные добавки
Если вы не хотите, чтобы сторонняя библиотека была упакована, но может быть импортирована внешне, и используется вместе, вы можете настроить внешние в Rollup.config.js
После выполнения сборки npm run я обнаружил, что упакованного содержимого стало меньше.
Затем использование на странице также немного модифицируется, скрипт вводится в lodash, и используются файлы, упакованные iife (потому что мы используем здесь метод ссылки на страницу), и страница может нормально выводиться при просмотре.
3. Используйте машинописный текст
Когда мы разрабатываем крупномасштабные проекты, мы обычно используем машинописный текст для повышения удобства сопровождения кода. Поэтому использование машинописного текста в сводке также важно.
3.1 Установите @rollup/plugin-typescript
Я использовал rollup-plugin-typescript, когда использовал его раньше.Когда я писал эту статью сегодня, я обнаружил, что этот плагин не поддерживается и не обновляется, а модуль был портирован на @rollup/plugin-typescript
cnpm install @rollup/plugin-typescript --save-dev
После установки найдена ошибка, нам предложено установить TSLIB и Teadncript
3.2 Установите tslib и typescript
cnpm install tslib typescript --save-dev
После установки давайте посмотрим на содержимое пакета
3.3 Настройка rollup.config.js
Расскажите об использовании плагинов
3.4 Настройка tsconfig.json
Если вы запустите npm run build напрямую без настройки, вам будет предложено создать новую конфигурацию tsconfig.
3.5 Написать файл TS
После запуска сборки npm run страница просмотра может быть проанализирована и запущена в обычном режиме.
4. Сжать код
Для временного кода меньше, мы будем использовать плагин сжатия кода
4.1 Установите накопительный плагин-терсер
Что более кратко, так это набор инструментов для синтаксического анализатора, менеджера и компрессора JavaScript для ES6+.
Мы больше знакомы с uglify, потому что использовали его в webpack, а также в rollup есть плагин rollup-plugin-uglify.
Мы видим Примечание: uglify-js переводит только синтаксис es5. Если вы хотите перевести синтаксис es6 +, используйте terser
Поэтому мы используем rollup-plugin-terser
cnpm install rollup-plugin-terser --save-dev
4.2 Настройка rollup.config.js
После введения и использования терсера мы запускаем npm run buld, чтобы увидеть результат.
5. Скомпилируйте CSS
Для разработки проектов мы используем webpack для разработки js-библиотек, Rollup сильнее, чем webpack. Разработка библиотеки js вообще не для написания css, если вы хотите писать много css, то возможно вы разрабатываете проект, желательно вебпак, в вебпаке тоже есть конфигурация развивающей библиотеки.
Если вам все еще нужно написать некоторые CSS в вашей библиотеке класса JS, Rollup также имеет плагины для компиляции CSS
5.1 Установите rollup-plugin-postcss
cnpm install rollup-plugin-postcss --save-dev
5.2 Настройка rollup.config.js
Введите плагин postcss и используйте его, сначала закомментируйте плагин сжатия, чтобы мы могли видеть, как будет выглядеть упакованный css.
5.3 Написание и использование css
1. Запишите файл style.css в каталог src.
2. Напишите соответствующий код использования CSS в main.js
3. Выполните npm run build, чтобы просмотреть содержимое упакованного файла. Мы видим, что css динамически вводится через этот код
4. Откройте страницу для просмотра html-кода
Так же возможно использование прекомпиляторов типа less.При необходимости задавайте мне вопросы и я их обновлю.
6. Различайте среду разработки и рабочую среду
В среде разработки нам нужно открыть исходную карту, настроить горячее обновление и локальную службу, в производственной среде нам нужно закрыть исходную карту, не требуется горячее обновление и локальная служба, требуется сжатие кода и т. д., поэтому нам нужно различать.
6.1 Разделить файл rollup.config.js на два файла rollup.config.dev.js и rollup.config.build.js
6.2 Измените имя пакета в package.json
7. Запустите локальный сервер
В самом процессе разработки мы должны запустить код и просмотреть страницу.В это время очень важно иметь локальный сервер, чтобы можно было отлаживать код.
7.1. Установите rollup-plugin-serve
cnpm install rollup-plugin-serve --save-dev
7.2 Настройка rollup.config.js
Не забудьте настроить sourcemap: true, чтобы было удобно отлаживать код.
Не забудьте создать файл index.html в корневом каталоге для ссылки на библиотеку классов js.
Настройте именование в package.json (изменено здесь, чтобы отличить среду разработки от производственной среды, см. ниже для этой конфигурации)
7.3 или используйте rollup-plugin-dev
По сравнению с serve этот плагин предоставляет следующие возможности:
cnpm install rollup-plugin0dev --save-dev
7.4 Настройка rollup.config.dev.js
8. Включите горячее обновление
Теперь локальный сервер доступен, но каждый раз при изменении кода его нужно перезапускать, чтобы он вступил в силу, что очень неудобно, поэтому требуется горячее обновление.
8.1 Установите rollup-plugin-livereload
cnpm install rollup-plugin-livereload --save-dev
8.2 Настройка rollup.config.dev.js
9. Несколько входных и выходных файлов
Rollup поддерживает одновременную обработку нескольких входных и выходных файлов, а режим просмотра также поддерживает обнаружение нескольких входных файлов. В этом случае используйте массив для упаковки. Например
export default [
// 第一个入口文件
{
input: "main-a.js",
output: {
file: "dist/bundle-a.js",
format: "cjs"
}
},
// 第二个入口文件
{
input: "main-b.js",
output: [
// 多个输出文件
{
file: "dist/bundle-b1.js",
format: "cjs"
},
{
file: "dist/bundle-b2.js",
format: "esm"
}
]
}
];
Этот шаблон не является распространенным. Более распространенным шаблоном является предыдущий входной файл и несколько выходных файлов. Разница между выходными файлами заключается в том, что они используют разные определения модулей, например, вывод модулей ES6 и модулей CommonJS одновременно.
10. Замена относительных путей псевдонимами
Плагин Rollup для определения псевдонимов при упаковке пакетов.
10.1 Установите @rollup/plugin-alias
cnpm install @rollup/plugin-alias --save-dev
10.2 Настройка rollup.config.dev.js
Если используется, необходимо изменить как среду разработки, так и среду сборки.
10.3 Измените файл для импорта и использования
11. Больше плагинов
11.1 @rollup/plugin-image
Можно импортировать файлы JPG, PNG, GIF, SVG и WebP.
Изображения закодированы с использованием base64, что означает, что они будут на 33% больше, чем их размер на диске. Дополнительные сведения об использованииGitHub.com/roll-up/plug…
11.2 @rollup/plugin-json
可将.json文件转换为ES6模块。 Дополнительные сведения об использованииGitHub.com/roll-up/plug…
11.3 rollup-plugin-copy
Копирование файлов и папок, а также поддержка глобусов. Дополнительные сведения об использованииGitHub.com/Влад садится в автобус в Японии…
11.4 rollup-plugin-visualizer
Визуализируйте и проанализируйте свои пакеты Rollup, чтобы увидеть, какие модули занимают место. Дополнительные сведения об использованииGitHub.com/nonstop/roll-up-…
11.5 rollup-plugin-web-worker-loader
Обработка веб-воркеров. Дополнительные сведения об использованииGitHub.com/adult ion co/RO…
Проблема исключения пакетов axios
Проблема упаковки исключений axios в накопительном пакете описана в этой статье.Наггетс.Талант/пост/685457…
Вышеупомянутые накопительные плагины можно найти на github. Конфигурацию использования конкретных плагинов можно найти в соответствующей документации по использованию плагинов.
Постоянно обновляется
Адреса плагинов, относящиеся к этим двум накопительным плагинам, нужные функции можно найти здесь.