Как webpack упаковывает общедоступные библиотеки классов?

Webpack
Как webpack упаковывает общедоступные библиотеки классов?

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

Очки знаний:

  • Библиотека для печати журнала переднего плана.адрес нпм
  • В этой статье (подробно) описывается, как должен быть опубликован канонический пакет npm.
  • Как упаковать общедоступные библиотеки классов с помощью веб-пакета, совместимого с различными средами и сценариями.

Отладка ежедневного журнала — очень простая вещь,console.logЭто также то, что мы используем каждый день, и однажды я увидел журнал проекта друга, подобный этому.

Так что я не могу не производить? ? ?

Удивительно найти один из своих журналов, а удалить чужие журналы непросто, поэтому ежедневная разработка часто выглядит так **console.log(info,'=========') .

Так что я хотелconsole.logЭтот метод инкапсулирован, чтобы сделать отладку более удобной, поэтому подготовьтесь к публикации пакета npm для использования в будущем.

Итак, кстати, я подробно расскажу, как опубликовать npm-пакет.

Как опубликовать пакет npm

Давайте сначала узнаем о npm

Как мы все знаем, текущий статус интерфейса выглядит следующим образом:

Текущая фронтенд-разработка неотделима отnode_modules, Фронтенд-инжиниринг породил этот продукт, позволяя фронтенду быстро развиваться, но есть и проект, который иногда бывает особенно огромным.node_modulesбывает, если это windows, иногда даже удалитьnode_modulesЭто занимает очень много времени для папокна сайте нпмДа, здесь вы можете искать все пакеты, используемые в вашем процессе разработки, поэтому, когда вы иногда сталкиваетесь с проблемой со скачанными определенными зависимостями, вы можете зайти сюда, чтобы посмотреть документацию автора. Если мы хотим опубликовать пакет, мы должны сначала зарегистрировать учетную запись на этом веб-сайте, которая здесь пропущена.

инициализировать проект

Пакет, который я назвал самsn-console, Это нормально, если это нравится всем. Причина, по которой я это делаю, заключается в том, что мое английское имя (SNine). Итак, первый шагnpm init, а затем нажмите Enter до конца, давайте взглянем на конкретную конфигурацию в pakeage.json.

{
  "name": "log",   //你要发布的包名称
  "version": "1.0.0",//你要发布的版本号
  "description": "", //关于你这个包的一个简单描述
  "main": "index.js", //您的项目入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",		//作者名字
  "license": "ISC" //代码的许可证，是否允许开源商用什么某某之类的协议。
}

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

1: Предварительная подготовка

Сначала создайте в каталогеindex.jsфайл, этоpackage.jsonвmain.jsУказанная запись, это запись кода. Это очень важно, особенно для библиотек компонентов. Если вы хотите изменить код библиотеки компонентов, которую вы используете в node_modules, сначала найдите библиотеку компонентов в node_modules.Первое, что вам нужно сделать, это просмотреть основной файл и найти входной файл библиотеки компонентов.Этот файл входной файл проекта. , при созданииsrcПапка используется для хранения кода, который мы хотим написать, тогда наш следующий код будет записан в src.

Вот простой случай, чтобы подробно представить, как упаковать стандартныйnpmjsобщественная библиотека.

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

  • Чтобы различать среду разработки и производственную среду
  • чтобы соответствовать различным спецификациям
  • Чтобы позволить пользователям выбирать предпочитаемый метод использования

Итак видно, что нам нужно использовать вебпак.Конечно, первым делом нужно скачать вебпак.Поскольку вебпак обновился до 5,многие новые фичи не очень понятны,поэтому сразу скачаю 4 версию здесь.

npm i webpack@4.44.0 webpack-cli@3.3.12 -D
  1. После загрузки создайте его в корневом каталоге одновременноwebpack.config.jsДрузья, которые использовали webpakc, знают, что этоwebpackФайл конфигурации не будет объяснен первым.
  2. пойти в то же времяpakeage.jsonсоздатьscriptкоманда на упаковку
{
  "name": "sn-console",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" //新建一条命令 npm run build 打包库
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12"
  }
}

2: инкапсулировать библиотеку журналов

Основная работа сделана, вот и инкапсуляция.Чтобы рассказать подробнее, вот вам еще немного знаний:

Давайте настроимwebpakeбазовая конфигурация,

module.exports = {
    entry: './src/index.js',
    output: {}
}

Здесь нечего настраивать, см.webpakcЧто будет упаковано по умолчанию.

Чтобы всем было легче понять, мы пишем только простой метод, чтобы все лучше поняли.src/indexВ нем также очень просто написать метод:

export default function add(a, b){
    return a + b;
}

Мы пишем функцию Plus для экспорта, то мы будем выполнятьnpm run buildСохраните пакет, чтобы увидеть, мы найдем дист-каталог, упакованныйmain.js, и это сжатый файл, который явно не соответствует нашим ожиданиям. Прежде всего, мы надеемся, что сможем упаковать два файла, один для среды разработки, а другой для производственной среды. Как решить эту проблему, конечно , через конфигурациюwebpakc.

module.exports = {
    entry: {
        "addNumber": './src/index.js',
        "addNumber.min": './src/index.js',
    },
    output: {
        filename: "[name].js",
        library: "addNumber",
        libraryTarget: "umd",
    }
}

Нам нужно только настроить таким образом, мы можем запаковать отдельно в distaddNumberа такжеaddNumber.minДва файла, значит, наша проблема решена? Открыв два файла, мы обнаружили, что оба файла сжаты, что явно не соответствует нашим ожиданиям.Хотя есть два файла, мы надеемся иметь один несжатый для использования в среде разработки, поэтому нам нужно продолжить настройку, мы знаем, что вwebpakeв конфигурацииmodeПараметры используются для настройки окружения, но можно указать только одно окружение, поэтому мы напрямую отключаем его и вводим сжатый плагин для решения этой проблемы.Так же скачиваем версию плагина 4.x.

npm install terser-webpack-plugin@4.2.0 -D

Тогда посмотри еще разwebpackнастроить

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    entry: {
        "addNumber": './src/index.js',   //为了输出两个文件，我们指定两个出口
        "addNumber.min": './src/index.js',
    },
    output: {
        filename: "[name].js",  //因为是多个文件，所以这样写
        library: "addNumber",  //打包出去库的名字
        libraryTarget: "umd",   //定义的规范，打包库的目标选项，包含var 、 assign 、 this 、 window 、 global 、 commonjs 、 commonjs2 、 commonjsmodule 、 amd 、 umd 、 umd2 、 jsonp这么多 umd是最通用的规范 默认值是var
    },
    mode: "none", //因为自带的只能指定一种环境，所以我们直接关闭，利用插件实现
    optimization: { //这个字段很强大，我们做webpack的代码分割，摇数，tree shake等都会用到这个字段
        minimize: true, //开启插件
        minimizer: [new TerserPlugin({
            test: /\.min.js/  //提供一个正则，表示符合有min.js的就进行压缩
        })]
    }
}

Таким образом можно добиться настоящей упаковки, и он этого добился,

  1. Упакованы две среды, сжатые и несжатые функции разработки и производства,
  2. Упакованный с использованием спецификации umd, при использовании он содержит несколько стандартов, будь тоesmodelещеcommonJsИ другие среды можно использовать как обычно, поэтому рекомендуется использовать этот способ упаковки нашей общедоступной библиотеки. Так ли вы все еще требуете импорта, можете ли вы получить, что это не очень удобно?

3: протестируйте нашу библиотеку

Вообще говоря, если вы хотите протестировать формальную библиотеку, то, конечно, лучше написать тест-кейсы, но кейс для вас сегодня очень прост, просто напишите html и импортируйте его, мы создадим его в каталогеindex.htmlИ представьте упакованный файл для тестирования, мы предоставили библиотеку как addNumber при настройке веб-пакета и распечатали ее напрямую:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/sn-console.js"></script>
    <script>
        console.log(addNumber)
    </script>
</body>
</html>

Мы импортировали его и распечатали, чтобы увидеть результат: угадайте, что?

Открой консоль и посмотри?

Мы обнаружили, что это былmodule, Вы позволите мне, как его использовать, открыл его, о? Наш оригинальный метод, в котором следующий по умолчанию это не плюс, чтобы найти хорошо, это мы добавляем распечаток не наш метод:console.log(addNumber.default(99,1))Открываем консоль и видим, что это 100. Этот метод реализован, но мы не можем позволить нам добавить дефолт, чтобы каждый раз вызывать его. Это слишком хлопотно. Это не то, что я думал. Что мне делать? Как это решить? Конечно, мы по-прежнему полагаемся на веб-пакет для достижения Luo, вwebpackЕсть еще одна важная конфигурация конфигурации,libraryExport:"default",существуетoutputДобавьте эту конфигурацию в , указав, что экспорт является значением по умолчанию, если не указано, мы экспортируемmodule, плюс эта конфигурация, экспортdefault, вы можете использовать его напрямую, пока наша среда упаковки закончилась.

Далее вам нужно делать?

4: экологические отличия, разработка/производство

В это время мы обнаружили, что упакованный файл находится под dist, и мыpackage.jsonВходной вопрос такойindex.js, то что же нам нужно сделать, это конечно очень просто. Вводится отдельно через различие среды в указателе.distСжатые и несжатые файлы ниже просто прекрасны.

"use strict"
if(process.env.NODE_ENV === 'production'){
    module.exports = require('./dist/sn-log.min')
}else{
    module.exports = require('./dist/sn-log')
}

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

5: Дополнить package.json

После написания такого пакета он готов к выпуску.Перед выпуском давайте вернемся к началу и наверстаем упущенное.package.jsonСодержание его, потому что его параметров на самом деле очень много.

{
  "name": "sn-console", //发布的包名称
  "version": "1.0.0", //发布的包版本号
  "description": "Beautiful and effective console printing about JS", //一句简短的描述介绍包
  "main": "index.js",	//指定项目入口文件
  "scripts": { //script脚本
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"
  },
  "keywords": [ //关键词，在npm网站输入这些关键词就可以搜索到你的包
    "console",
    "snine",
    "log"
  ],
  "author": "Snine", //这个包的作者，可以写自己名字就好
  "license": "ISC",  //当前包支持的开源协议
  "repository": { //对于组件库很有用。让组件库使用者找到你的代码库地址。这个配置项会直接在组件库的npm首页生效
    "type": "git",
    "url": "git+https://github.com/xxxxxxxxxx"
  },
  "devDependencies": { //开发依赖
    "terser-webpack-plugin": "^4.2.0",
    "webpack": "^4.44.0",
    "webpack-cli": "^3.3.12"
  }
}

Мы можем назвать пакет проекта, определить номер версии, описать пакет, ключевые слова, автора, протокол и т. д. Здесь следует отметить, что

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

6: Напишите README.md

README.mdЭто мануал пакета, этот файл создается в корневом каталоге, а потом в него записывается мануал.

Конечно этого мало, загружаем код вgithubнужно.gitignoreЧтобы предотвратить загрузку некоторых бесполезных файлов, то же самое верно и для загрузки в npm, вам нужно создать.npmignoreДа ладно, не надо исключать загруженные файлы, это зависит от ваших потребностей, поэтому я не буду их перечислять.

Хорошо: теперь у нас все готово, и мы должны только восточному ветру.

7: Публикация на рынке npm

Как правило, для публикации на рынке npm требуется всего два шага, вход в систему, публикация.

  1. npm loginзатем введитевеб-сайт нпмучетная запись и пароль для входа
  2. npm publishПросто опубликуйте это.

Конечно есть и подводные камни.В большинстве случаев почему из-за исходной проблемы,npmИсточник .npmпервоисточник,npm config **set** registry=http://registry.npmjs.org

  • Конечно же, для вашего удобства я подготовил для вас скрипт sh, который можно загрузить в один клик.

Создаем файл в корневом каталогеpublish.sh

#!/usr/bin/env bash
npm config get registry 
npm config set registry=http://registry.npmjs.org
echo '请进行登录:'
npm login #登录
echo '===========publish=========='
npm publish #发布
npm config set registry=http://registry.npm.taobao.org
echo '发布完成'
exit

Просто введите в терминалеsh ./publish.shЗатем введите пароль своей учетной записи и адрес электронной почты, чтобы опубликовать его.Конечно, в первый раз не будет достаточных разрешений для папки, это нормально, чтобы добавить разрешения для папки. Успех релиза, вероятно, таков:

Ладно, после публикации.npmНа ваш почтовый ящик будет отправлен почтовый ящик, а затем войдите на веб-сайт, чтобы увидеть опубликованный вами пакет, а затем попробуйте его, полный и стандартизированныйпубличная библиотека npmВот и все.

sn-console

Давайте вернемся к началу.Исходя из вышеперечисленных проблем, мы инкапсулировали такую ​​публичную библиотеку, чтобы сделать ежедневную отладку более удобной.Давайте посмотрим, как ее использовать;

  • npm install sn-console --save
  • import 'sn-console'

В проект легко внедряются только две части, т.к.consoleЭто сам по себе глобальный объект, поэтому мы напрямую монтируем экспортированный журнал вwindowВыше давайте посмотрим, как его использовать.На самом деле, это позволяет журналу печатать цветные шрифты и добавлять метки, чтобы мы могли видеть журналы, которые мы печатали быстрее.Я экспортировал объект с именем log, который мы можем печатать напрямую.Посмотрите на методы внутри объекта, вы также можете вызвать напрямуюlog.help()Метод будет подробно описан. Его можно вызвать в коде, а можно вызвать прямо в консоли, потому что мы его уже смонтировали вwindow.

  • Основное использование
  1. log является объектом, при условии, соответственно,log.info(),log.primary,log.success,log.warning,log.danger(), А как насчет этих методов, вы можете распечатать журнал с заголовком метки, чтобы увидеть эффект
let arr = [
            {
                name: 'SNine',
                age: 22
            },
            {
                name: '张三',
                age: 28
            }
        ]
  log.info(arr)
  log.success(arr)
  log.primary(arr)
  log.warning(arr)
  log.danger(arr)

Он напечатает цветную этикетку.Подумайте об этом, если в середине черного есть немного зеленого, вы можете увидеть напечатанный вами журнал с первого взгляда?Конечно, если слишком много зеленого, мы можем ослепнуть опять же, так что этот заголовок метки Конечно, его тоже можно изменить.Нам нужно только передать второй параметр, и он изменит свое имя метки.Давайте попробуем.

log.info(arr,'这是我自己改的标签头')
log.success(arr,'这是我自己改的标签头')
log.primary(arr,'这是我自己改的标签头')
log.warning(arr,'这是我自己改的标签头')
log.danger(arr,'这是我自己改的标签头')

  • распечатать фотографии

Откройте консоли некоторых веб-сайтов, мы обнаружим, что на некоторых веб-сайтах есть изображения, которые приветствуют вас, поэтому я также предоставляю метод **log.img()**, который можно использовать для печати изображений, вам нужно передать соединение, просто случайно найдите его на Baidu.

        log.img('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2969235134,2098148338&fm=11&gp=0.jpg')

  • распечатать разделительную линию

log.line(), иногда я будуconsole.log('-----------------------------------------------')Такая строка делает журнал более очевидным и его легче найти.Здесь прямой вызов этого метода напечатает такую ​​строку, и никакой демонстрации не будет.

  • очистить другие журналы

Иногда в таком сценарии я хочу видеть только журнал того-то и того-то, и я не хочу видеть предыдущий, поэтому вызываю этот методlog.clear(), после звонка предыдущие логи не печатаются, а последующие логи выводятся нормально.

  • Распечатайте приветственный цветочный символ и сразу увидите эффект.

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

  • Распечатайте сообщение об авторских правах и сразу увидите результат

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

  • Проверьте производительность ваших собственных веб-страниц

Этот метод более мощный, тестирование производительности переднего плана также является темой, простоchromeпредоставилAPIможно реализовать,performance, вы можете сами проверить конкретные функции, наш метод очень прост, просто вызовитеlog.performance(), он подсчитывает для вас различные временные периоды веб-страницы, и вы можете изучить ее самостоятельно.

  • Перехватить console.log

Как и в случае с предыдущей сценой, я устал ее смотреть, поэтому мы не можем удалить так много других.console.logИтак, мы приветствуем перехватconsole.logПросто позвониlog.clearAll, вы обнаружите, что всеconsoleВсе журналы исчезли, и тогда мы можем с радостью использовать нашу собственную библиотеку журналов для печати наших собственных журналов, и нам больше не нужно будет беспокоить других.Конечно, не забудьте удалить этот метод, когда закончите, иначе я не гарантирует, что завтра ваши товарищи по команде не будут бить людей.(ручная собачья голова), в то же время, этот метод можно использовать и для оценки окружения. Запуск этого метода во время производства также может привести к исчезновению всех консолей. при упаковке это тоже простая реализация Метод Lo.

Суммировать

Мы часто теряем направление обучения на работе и часто думаем о своем собственном направлении обучения, о том, как учиться и как быть эффективными. По моему мнению, лучше создавать собственные колеса и публиковать больше наших собственных публичных библиотек. Далее время, мы реализуем определенную Когда используется определенная функция, вы должны знать причину и причину, а также найти детали, которые можно найти в Baidu.руководство по публикации npmЕсть разные, но недостаточно подробные, поэтому в свободное время я написал подробное введение. Надеюсь, оно вам поможет. Конечно, создать его непросто. Если оно вам поможет, пожалуйста, поставьте мне лайк.

Категории