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

В моем предыдущем посте я изо всех сил пытался объяснить интригующую тонкость разработки локального пакета npm.

Как вы, возможно, знаете, в настоящее время я разрабатываю redux-chess, шахматную доску на основе Redux, в первую очередь предназначенную для подключения к серверу WebSocket для проверки шахматных ходов, оценки позиции и многих других интересных функций.

Рекомендуется протестировать пакет из хост-приложения вне самого пакета. Однако оказывается, что npm install создаст символическую ссылку при установке локального пакета, что может закончиться недружественным тестированием.

Для получения дополнительной информации по этой не столь очевидной теме посетите:

Кстати, хост-приложение, которое я использую для тестирования redux-chess, называется testing-redux-chess и доступно в этом репозитории GitHub.

Сегодня позвольте мне подробнее рассказать о том, как протестировать многообещающий, потрясающий локальный пакет npm из тестового приложения.

В данном случае мы надеемся, что nicojs/node-install-local поможет нам избавиться от неприятной символической ссылки, которую npm install автоматически создаст в ./node_modules/redux-chess/node_modules.

Итак, я установил install-local глобально.

$ npm install -g install-local

А затем redux-chess - мой пакет npm, который, как вы помните, все еще находится в разработке - в основной папке моего тестового приложения: ~/projects/testing-redux-chess.

$ cd ~/projects/testing-redux-chess/
$ install-local --save ../redux-chess

install-local создал ключ localDependencies в файле testing-redux-chess/package.json, как описано ниже.

...
"localDependencies": {
    "redux-chess": "../redux-chess"
}
...

На этом этапе я написал несколько удобных скриптов в package.json файле с целью сделать мою разработку более приятной.

...
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "stop": "kill -9 $(lsof -t -i:$npm_config_port)",
    "restart": "kill -9 $(lsof -t -i:$npm_config_port) && react-scripts start",
    "update:local:redux-chess": "rm -rf ./node_modules/redux-chess/dist && cp -r ../redux-chess/dist ./node_modules/redux-chess/dist"
  },
...

Вот scripts, которые помогают автоматизировать этот процесс тестирования:

  • npm run stop --port=3000
  • npm run restart --port=3000
  • npm run update:local:redux-chess

Последовательность команд для легкого тестирования redux-chess, наконец, выглядит так.

Переместите код в папку пакета.

$ npm run publish:npm

Обновите пакет в тестовом приложении.

$ npm run update:local:redux-chess

Перезапустите приложение для тестирования.

$ npm run restart --port=3000

Эти команды можно объединить в одну цепочку, чтобы создать одну команду, которая будет выполняться в папке ~/projects/testing-redux-chess.

$ npm run publish:npm --prefix /home/standard/projects/redux-chess && npm run update:local:redux-chess && npm run restart --port=3000

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

Я думаю, что в идеальном мире вам нужно было бы транспилировать код пакета и сразу же следить за изменениями, не перезагружая приложение React, но похоже, что мы всего в одном шаге от этого.

На этом пока все, большое спасибо за чтение.



Как протестировать локальный пакет Npm React, который все еще находится в разработке
Требуемая настройка не слишком сложна, но достаточно забавна, что вы можете потратить кучу времени без плана тестирования в … medium.com



Вам также может быть интересно:

Больше контента на plainenglish.io