Ajs-project NPM

Домашнее задание к лекции «Платформы: браузер vs Node.js»

Важно: каждая задача выполняется в виде отдельного проекта с собственным GitHub репозиторием.

В личном кабинете на сайте netology.ru в поле комментария к домашней работе вставьте ссылки на ваш GitHub-проекты.

Примечание: это домашнее задание скорее является лабораторной работой нежели домашним заданием в прямом смысле этого слова.

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

Библиотека для браузера и Node.js

Легенда

Вы решили создать библиотеку, которую можно будет использовать как в браузере, так и в Node.js. Если вы помните, то мы рассматривали Moment.js, в котором бы хитрый код.

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

Для этого мы воспользуемся возможностями Webpack.

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

Описание

Шаг 0. Создание репозитория

Перейдите на GitHub и создайте пустой репозиторий для вашего проекта (он нам понадобится для всех остальных действий). Мы будем подразумевать в рамках всей лабораторной работы, что вы назвали репозиторий ajs.

Склонируйте этот репозиторий на вашу локальную машину и все дальнейшие действия выполняйте в каталоге склонированного репо.

Шаг 1. Генерация проекта

Важно: везде далее под: 1. USERNAME будет пониматься имя вашего пользователя на GitHub в нижнем регистре (все буквы маленькие) 1. REPO будет пониматься название вашего репозитория на GitHub в нижнем регистре (все буквы маленькие) 1. TOKEN будет access token (см. ниже), который вы сгенерируете на GitHub

Создайте проект на GitHub-проект, после чего с помощью npm init --scope=@username (где username - имя вашего пользователя на GitHub в нижнем регистре, например, если на GitHub у меня логин Netology-Code, то команда будет npm init --scope=@netology-code) сгенерируйте package: 1. package name - @username/ajs (вам предложат автоматически) 1. version - 1.0.0 (по умолчанию) 1. description - оставьте пустым (по умолчанию) 1. entry point - dist/index.js (!надо поменять на dist/index.js) 1. остальное всё по умолчанию (просто нажимайте enter)

Убедитесь, что в packages.json автоматически прописался адрес вашего репозитория.

Добавьте .gitignore, который мы для вас приготовили.

Сделайте commit и push, убедитесь, что код попал в ваш репозиторий на GitHub

Шаг 2. Получение Access Token

Мы будем использовать сервис GitHub Packages (куда вы опубликуете свою библиотеку), чтобы не замусоривать npmjs.com.

Для этого, нам нужно получить Access Token.

Перейдите в настройки:

Выберите пункт меню Developer Settings:

Выберите пункт меню Personal Access Tokens (1), затем нажмите на кнопку Generate new token (2):

npm.io

Заполните поле Note (1) и поставьте флажок напротив write:packages (2), остальные все флажки выставятся автоматически:

npm.io

После чего нажмите на кнопку Generate в самом низу страницы:

GitHub запроси у вас пароль для подтверждения:

npm.io

После чего вам будет сгенерирован токен. Важно: токен будет показан только один раз, поэтому убедитесь, что скопировали его:

npm.io

Если вдруг вы всё-таки не скопировали его, то просто удалите старый и сгенерируйте новый.

Шаг 3. Создание .npmrc

Перейдите в ваш домашний каталог (узнать, где он находится, можно с помощью команды echo $HOME в Linux/Mac или echo %USERPROFILE% в Windows) и создайте там файл .npmrc (не забудьте про точку) следующего содержания:

//npm.pkg.github.com/:_authToken=TOKEN
registry=https://npm.pkg.github.com/USERNAME

Обратите внимание, вместо TOKEN вы подставляете токен, вместо USERNAME - имя своего пользователя в нижнем регистре.

Q: что это нам даёт?

A: NPM будет использовать эти данные для аутентификации, а с помощью GitHub Packages (запись registry) вы создадите собственный мини-аналог npmjs.com.

Q: почему мы сразу не публикуем на NPM?

A: чтобы не замусоривать его + из соображений безопасности, вам даётся всего 72 часа, чтобы удалить потом пакет оттуда (при условии, что никто не успел им воспользоваться). А кроме того, если вы удалите пакет, то потом уже не сможете воспользоваться этим именем (например, создадите пакет ajs для тестов, удалите его, а затем снова решите создать такой же - не получится). В GitHub Packages же проблем с этим не будет - можно просто удалить репо, создать новый и пробовать заново.

Шаг 4. Установка зависимостей

Установите следующие dev-зависимости:

@babel/cli
@babel/core
@babel/preset-env
babel-loader
webpack
webpack-cli

Обратите внимание, для простоты мы не устанавливаем corejs, в случае Node.js он вообще не нужен, а в случае браузера будем считать, что это ответственность подключающего библиотеку.

Шаг 5. Конфигурационные файлы

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env"
    ]
  ]
}

.browserslistrc:

last 1 version
> 1%
maintained node versions
not dead

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // каталог для результатов сборки 
    filename: 'index.js', // имя файла с результатами сборки (должно совпадать с entry point в шаге 1)
    library: 'ajs', // название нашей библиотеки
    libraryTarget: 'umd', // UMD (Universal Module Definition https://github.com/umdjs/umd) - шаблон, который позволяет использовать RequireJS и браузер
    libraryExport: 'default', // экспортируется имя default
    globalObject: 'this', // что принимать за глобальный объект, иначе сгенерируется window, а его, как вы знаете, на платформе Node.js нет
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

Особые настройки package.json:

  "publishConfig": {
    "registry":"https://npm.pkg.github.com/"
  },
  "scripts": {
    "build": "webpack --mode production"
  },

publishConfig - куда публикуем наш пакет (в GitHub Packages)

build - скрипт сборки

Шаг 6. Создание библиотеки

В файле src/index.js разместите следующий код:

function info() {
  const m = new Map();
  m.set('name', 'ajs');
  m.set('version', '1.0.0');
  return m;
}

export default {
  info
};

После чего запустите сборку: npm run build - у вас должен появиться каталог dist с файлом index.js внутри.

Теперь добавьте всё в git и сделайте push. Удостоверьтесь, что все файлы были отправлены на GitHub.

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

Для этого есть команда npm publish. Если вы всё сделали правильно, то её вывод будет выглядеть примерно так (конечно, у вас будут другие адреса):

npm.io

Обратите внимание, что dist/index.js есть в опубликованном пакете, но не хранится в GitHub.

Теперь обновите страницу репозитория. Сбоку вы должны увидеть информацию о пакете:

npm.io

Кликните на имени пакета, чтобы посмотреть информацию о нём:

npm.io

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

Нас будет интересовать два варианта использования (поскольку через шаблон Webpack всё будет работать как обычно):

в Node.js
в браузере через тег script

Итак, в Node.js: 1. Создайте новый проект (GitHub репозиторий, clone, перейдите в каталог склонированного репо), выполните в нём команду: npm init 1. Установите ваш пакет: npm install @netology-code/ajs@1.0.0 (естественно, вам нужно писать не netology-code, а имя своего репо) 1. Создайте файл src/index.js следующего содержания:

// у вас будет не netology-code, а ваш username
const ajs = require('@netology-code/ajs');

console.log(ajs.info());

Пропишите скрипт запуска (в package.json):

"scripts": {
   "start": "node src/index.js"
}

Проверьте, что запускается (npm start):

npm.io

Теперь сделаем почти то же самое в браузере. Здесь нам придётся немного посложнее, поскольку для npmjs.com есть специальный CDN https://unpkg.com/, который вам позволяет через URL подключать конкретные файлы.

Для GitHub Packages такого пока нет, поэтому придётся сделать чуть по-другому.

Удалите каталог dist из .gitignore и запушьте его на GitHub (удостоверьтесь, что он там появился):

npm.io

Перейдите к файлу index.js (который в каталоге dist) и нажмите на кнопку Raw:

npm.io

Скопируйте URL из строки браузера (в примере он вот такой: https://raw.githubusercontent.com/netology-code/ajs/master/dist/index.js).

Теперь перейдите на сервис GitCDN, подставьте получившийся URL в верхнее поле (1), а с нижнего скопируйте итоговый URL (2):

npm.io

Остался последний штрих: воспользуйтесь сервисом JSBin для того, чтобы быстро проверить работоспособность вашего кода:

npm.io

После чего выберите File -> Save Snapshot:

npm.io

После этого станет активна кнопка Share (вам нужно скопировать URL):

Итого

Вы присылаете три ссылки: 1. Ссылка на репозиторий с вашим пакетом 1. Ссылка на репозиторий проект с Node.js 1. Ссылка на JSBin

Дополнительно

Если хотите, можете пообновлять версии, делается это с помощью команды node version <новый номер версии>. Обратите внимание, вам не дадут два раза опубликовать пакет с той же версией (т.е. делать npm publish не изменив версию пакета нельзя).

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

Репозиторий из примеров расположен по ссылке: https://github.com/netology-code/ajs

acorn ajv ajv-formats ajv-keywords anymatch babel-loader babel-plugin-polyfill-corejs2 babel-plugin-polyfill-corejs3 babel-plugin-polyfill-regenerator balanced-match binary-extensions brace-expansion braces browserslist buffer-from caniuse-lite chokidar chrome-trace-event clone-deep colorette commander common-path-prefix concat-map convert-source-map core-js-compat cross-spawn debug electron-to-chromium enhanced-resolve envinfo es-module-lexer escalade eslint-scope esrecurse estraverse esutils events fast-deep-equal fast-json-stable-stringify fast-uri fastest-levenshtein fill-range find-cache-dir find-up flat fs-readdir-recursive fs.realpath function-bind gensync glob glob-parent glob-to-regexp globals graceful-fs has-flag hasown import-local inflight inherits interpret is-binary-path is-core-module is-extglob is-glob is-number is-plain-object isexe isobject jest-worker js-tokens jsesc json-parse-even-better-errors json-schema-traverse json5 kind-of loader-runner locate-path lodash.debounce lru-cache make-dir merge-stream mime-db mime-types minimatch ms neo-async node-releases normalize-path once p-limit p-locate p-try path-exists path-is-absolute path-key path-parse picocolors picomatch pify pkg-dir punycode randombytes readdirp rechoir regenerate regenerate-unicode-properties regenerator-runtime regenerator-transform regexpu-core regjsgen regjsparser require-from-string resolve resolve-cwd resolve-from safe-buffer schema-utils semver serialize-javascript shallow-clone shebang-command shebang-regex slash source-map source-map-support supports-color supports-preserve-symlinks-flag tapable terser terser-webpack-plugin to-regex-range undici-types unicode-canonical-property-names-ecmascript unicode-match-property-ecmascript unicode-match-property-value-ecmascript unicode-property-aliases-ecmascript update-browserslist-db uri-js watchpack webpack webpack-cli webpack-merge webpack-sources which wildcard wrappy yallist yocto-queue

1.0.0

6 months ago