Борьба с конфигурацией и использованием накопительного инструмента для упаковки внешних компонентов/библиотек

JavaScript rollup.js

В настоящее время основные интерфейсные фреймворки vue и react поставляются с накопительными пакетами.Чтобы раскрыть тайну накопительных пакетов, давайте рассмотрим шаг за шагом и создадим основу для упаковки библиотек на основе накопительных пакетов для публикации наших собственных библиотек и компонентов.

предисловие

Статья о свертывании была написана, потому что автор недавно хотел стандартизировать бизнес-процесс и архитектуру разработки интерфейса, а также предоставить внутренние общедоступные библиотеки компонентов и библиотеки инструментов для использования командой. Изучив много информации и сравнив преимущества и недостатки webpack и rollup, мы, наконец, выбрали rollup в качестве инструмента для упаковки и, наконец, хотим установить нашу библиотеку компонентов и библиотеку инструментов через npm:

// 安装
npm install @xuxi/tools
// 使用
import { sleep } from '@xuxi/tools'

Давайте пошагово рассмотрим процесс настройки объединения и рекомендации.

Введение в сведение

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

Грубо говоря, Rollup — это сборщик модулей JavaScript, который компилирует небольшие фрагменты кода в большие сложные фрагменты кода, такие как библиотеки или приложения. Rollup использует новый стандартизированный формат для модулей кода, все из которых включены в версию JavaScript ES6, а не специальные решения, такие как CommonJS и AMD.

Самая большая особенность свертки — это Tree-shaking, который статически анализирует импорты в коде и исключает любой неиспользуемый код. Это позволяет нам использовать существующие инструменты и модули, не добавляя дополнительных зависимостей и не увеличивая размер проекта. Если вы используете webpack, хотя tree-shaking может быть реализован, вам нужно настроить его самостоятельно, а упакованный код сильно раздут, поэтому rollup больше подходит для файлов библиотек и компонентов пользовательского интерфейса.

Строительные леса для упаковки библиотеки

1. Начало работы с накопительным пакетом

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

npm i rollup -g

Затем создайте проект локально:

mkdir -p my-project
cd my-project

Далее мы создаем запись и пишем следующий код:

// src/main.js
import say from './say.js';
export { say }

// src/say.js
export default function(name){ 
    console.log(name) 
};

После того, как базовый код готов, пишем файл конфигурации роллапа (rollup.config.js находится в корневом каталоге):

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

Таким образом, мы выполняем в терминале:

// --config 或 -c 来使用配置文件
rollup -c

Таким образом, в новом каталоге создается файл bundle.js, который представляет собой упакованный файл, который нам нужен. Мы также можем использовать package.json для установки информации о конфигурации упаковки и использовать npm run xxx для упаковки и тестирования кода.

2. Использование накопительного плагина

Чтобы более гибко упаковать файлы библиотеки, мы можем настроить плагин для сворачивания, наиболее практичные плагины:

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

Библиотека заполнена дополнительными плагинами, но если вы хотите реагировать на код реализации, и другие компоненты могут иметь больше плагинов, здесь можно использовать не один за другим.

Мы можем использовать его так, как в конфигурации плагина webpack:

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()
		]
	}
];

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

3. Используйте 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 в плагинах .babelrc, а также изменить файл конфигурации накопительного пакета:

babel({
  exclude: 'node_modules/**', // 防止打包node_modules下的文件
  runtimeHelpers: true,       // 使plugin-transform-runtime生效
}),

Если вы не знакомы с babel, вы можете прочитать мою предыдущую статью о веб-пакете или перейти на официальный сайт, чтобы узнать больше.

4. Различайте тестовую среду и среду разработки

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

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

Мы можем вручную экспортировать NODE_ENV как production и development, чтобы различать 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"
        ]
    }
};

Подробную настройку eslint можно изучить на официальном сайте.

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

Используя накопительную упаковку, нам нужно использовать сторонние библиотеки, такие как lodash и т. д., в наших собственных библиотеках, и мы не хотим, чтобы jquery появлялся в конечном упакованном файле. На этот раз нам нужно использовать внешнее свойство. Например, мы используем lodash,

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' }
    ]
}

6. Режим экспорта

Мы можем экспортировать наш код в модули commonjs, es-модули и модули, распознаваемые браузером, и устанавливать их следующими способами:

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

Опубликовать в нпм

Если вы еще не зарегистрировали учетную запись npm, вы можете настроить ее следующим образом:

npm adduser

Затем введите имя пользователя, адрес электронной почты, пароль и, наконец, используйте npm publish для публикации. Здесь представлен файл конфигурации пакета, а именно package.json:

{
  "name": "@alex_xu/time",
  "version": "1.0.0",
  "description": "common use js time lib",
  "main": "dist/tool.cjs.js",
  "module": "dist/time.esm.js",
  "browser": "dist/time.umd.js",
  "author": "alex_xu",
  "homepage": "https://github.com/MrXujiang/timeout_rollup",
  "keywords": [
    "tools",
    "javascript",
    "library",
    "time"
  ],
  "dependencies": {
    // ...
  },
  "devDependencies": {
    // ...
  },
  "scripts": {
    "build": "NODE_ENV=production rollup -c",
    "dev": "rollup -c -w",
    "test": "node test/test.js",
    "pretest": "npm run build"
  },
  "files": [
    "dist"
  ]
}

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

После публикации мы можем установить его следующим образом:

npm install @alex_xu/time
// 使用
import { sleep } from '@alex_xu/time'
// 或
const { sleep } = requrie('@alex_xu/time')

Ниже приведен скриншот установки:

Вы также можете искать свои собственные пакеты в npm:

Это чувство достижения? Пусть все используют пакет, который вы разработали вместе!

наконец

Я опубликовал полный файл конфигурации на github, адрес:GitHub.com/Mr X U соус/Он…

Если вы хотите узнать больше о интерфейсных знаниях и практике, таких как webpack, gulp, css3, javascript, nodeJS, canvas и т. д., присоединяйтесь к нам в общедоступной учетной записи «Интересный интерфейс», чтобы учиться и обсуждать вместе и исследуйте границы интерфейса вместе.

больше рекомендаций

Категории