QuickLib

介绍

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

Размер quick.min.js после сжатия составляет менее 28 КБ.

• Онлайн-документация.
• Обновления.
• Начало работы с Rollup.

Обновления

• Информация о каждой версии.

Установка

Разработка:

yarn install
yarn dev

Сборка:

yarn build

Упаковка

Библиотека экспортируется в виде модулей CommonJS, ES и модулей, которые могут быть распознаны браузерами. Настройка осуществляется с помощью следующих параметров:

• output.file: файл, в который будет записан вывод, также может использоваться для создания исходных карт.
• output.format: формат пакета, доступны следующие форматы:
  • amd — асинхронное определение модуля, используется для загрузчиков модулей, таких как RequestJS.
  • cjs — CommonJS, подходит для Node или Browserify/webpack.
  • es — сохраняет пакет как модуль ES.
  • iife — автоматически выполняемая функция, подходящая для использования в качестве тега <script>.
  • umd — универсальное определение модуля, объединяющее amd, cjs и iife.

Пример конфигурации:

{
  input: 'src/main.js',
  external: ['ms'],
  output: [
    { file: pkg.main, format: 'cjs' },
    { file: pkg.module, format: 'es' },
    { file: pkg.module, format: 'umd' }
  ]
}

Rollup

Тестирование веб-приложения:

# Тестирование веб-страницы
npm run web

# Сборка компонентов
npm run build

# Создание отдельного компонента для импорта в Vue
npm run esm

# Создание универсального модуля для браузера
npm run umd

Установка Rollup:

npm i rollup -g

// Затем создайте проект локально:
mkdir -p my-project
cd my-project

Файл конфигурации Rollup (rollup.config.js находится в корне проекта):

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

Плагины Rollup

Вот некоторые полезные плагины:

• rollup-plugin-node-resolve — помогает Rollup находить внешние модули и импортировать их.
• rollup-plugin-commonjs — преобразует модули CommonJS в модули ES2015 для обработки Rollup.
• rollup-plugin-babel — позволяет использовать функции ES6 при написании кода.
• rollup-plugin-terser — сжимает код JavaScript, включая код ES6.
• rollup-plugin-eslint — проверяет код на соответствие стандартам.

Конфигурация:

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import { eslint } from 'rollup-plugin-eslint';

export default [
  {
    input: 'src/main.js',
    output: {
      name: 'timeout',
      file: '/lib/tool.js',
      format: 'umd',
    },
    plugins: [
      resolve(), // Rollup может найти `ms`
      commonjs(), // Rollup может преобразовать `ms` в модуль ES
      eslint(),
      babel(),
      terser(),
    ],
  },
];

Babel компилирует код ES6

Сначала установите необходимые модули Babel:

npm i core-js @babel/core @babel/preset-env @babel/plugin-transform-runtime

Затем настройте файл .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": "2.6.10",
        "targets": {
          "ie": 10
        }
      }
    ]
  ],
  "plugins": [
      // Решает проблему дублирования кода при использовании одного и того же кода в нескольких местах
      ["@babel/plugin-transform-runtime"]
  ],
  "ignore": [
      "node_modules/**"
    ]
}

@babel/preset-env может автоматически преобразовывать код ES2015+ в код ES5 в зависимости от целевой платформы браузера или среды выполнения. Обратите внимание, что мы установили «modules»: false, иначе Babel преобразует наши модули в CommonJS до того, как Rollup сможет обработать их, что приведёт к сбою некоторых операций Rollup.

Чтобы решить проблему дублирования кода, когда один и тот же код используется в разных местах, нам нужно настроить @babel/plugin-transform-runtime в разделе plugins файла .babelrc и изменить конфигурацию Rollup:

babel({
  exclude: 'node_modules/**', // Предотвратить упаковку файлов в node_modules
  runtimeHelpers: true,       // Включить plugin-transform-runtime
}),

Разделение тестовой и рабочей сред

Мы можем настроить различные сценарии выполнения и переменные среды в package.json для настройки разработки и производства:

// package.json
"scripts": {
    "dev": "rollup -c -w --environment NODE_ENV:development",
    "build": "rollup -c --environment NODE_ENV:production",
    "test": "node test/test.js"
  },

Вручную экспортируйте NODE_ENV как production и development, чтобы различать производственную и разрабатываемую среды, а затем получите параметр через process.env.NODE_ENV в коде. Здесь мы в основном используем его для отключения сжатия кода в среде разработки:

const isDev = process.env.NODE_ENV !== 'production';
// ...
plugins: [!isDev && terser()];

Eslint для проверки кода

Используйте rollup-plugin-eslint для настройки:

eslint({
  throwOnError: true,
  throwOnWarning: true,
  include: ['src/**'],
  exclude: ['node_modules/**'],
});

Создайте файл .eslintrc.js для настройки конкретных проверок в соответствии с вашими предпочтениями:

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  extends: 'eslint:recommended',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    ENV: true,
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
    'linebreak-style': ['error', 'unix'],
    quotes: ['error', 'single'],
  },
}; ### external атрибут

При использовании Rollup для сборки нам нужно использовать сторонние библиотеки в нашем собственном коде, например, Lodash и т. д., но мы не хотим, чтобы JQuery появлялся в конечном собранном файле. В этом случае нам необходимо использовать атрибут external. Например, если мы используем Lodash, то конфигурация Rollup будет выглядеть следующим образом:

```js
import _ from 'lodash';

// rollup.config.js
{
    input: 'src/main.js',
    external: ['lodash'],
    globals: {
        lodash: '_'
    },
    output: [
      { file: pkg.main, format: 'cjs' },{ file: pkg.module, format: 'es' }
    ]
}

Сборка вывода

Мы можем экспортировать модули в форматах CommonJS, ES и в формате, который может быть распознан браузером, используя следующие настройки:

• output.file — файл, в который будет записан вывод, также может использоваться для создания sourcemaps.
• output.format — формат сборки пакета, доступны следующие форматы:
  1. amd — асинхронное определение модуля, используется с модульными загрузчиками, такими как RequestJS.

2. cjs — CommonJS, подходит для Node или Browserify/webpack.
3. es — пакет сохраняется как модуль ES.
4. iife — автоматически выполняемая функция, подходящая для использования в тегах <script>.
5. umd — универсальное определение модуля, объединяющее amd, cjs и iife.

Конфигурация может выглядеть так:

{
  input: 'src/main.js',
  external: ['ms'],
  output: [
    { file: pkg.main, format: 'cjs' },
    { file: pkg.module, format: 'es' },
    { file: pkg.module, format: 'umd' }
  ]
}

Публикация на npm

Для публикации на npm необходимо выполнить следующие шаги:

1. Зарегистрироваться: npm adduser.
2. Войти: npm login.
3. Опубликовать: npm publish.

name — это имя пакета, можно указать непосредственно имя пакета, например, loadash, или добавить домен, например, @koa/router, где @ — ваше имя пользователя на npm. key — ключевые слова пакета.