13 советов по быстрой разработке npm

JavaScript NPM

Переводчик: Front-end Xiaozhi

оригинал:medium.com/@like ET Cam два часа…

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Каждый день миллионы разработчиков используютnpmилиyarnпостроить проект. бегатьnpm initилиnpx create- response -appetc являются предпочтительным способом создания проектов JS, будь то для клиентской или серверной части или настольных приложений.

ноnpmНе просто запускать проекты или устанавливать пакеты. В этой статье мы познакомимnpm13 советов, как получить максимальную отдачу отnpm: от простых ярлыков до пользовательских сценариев.

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

основное содержание

  1. Изучите основные сочетания клавиш

  2. Установить свойства инициализации npm по умолчанию

  3. Сделайте скрипты кроссплатформенными

  4. Запуск скриптов параллельно

  5. Запуск скриптов в разных каталогах

  6. Отложить выполнение скрипта до тех пор, пока порт не будет готов

  7. Перечислите и выберите доступные сценарии

  8. сценарии до и после запуска

  9. Контроль версии приложения

  10. Отредактируйте package.json из командной строки.

  11. Автоматически настройте и откройте репозиторий github

  12. настроитьnpm initсценарий

  13. Зафиксируйте свой первый коммит на GitHub, используя собственный скрипт инициализации npm.

1. Изучите основные сочетания клавиш

Мы начнем с основ, а изучение наиболее распространенных сокращений npm сэкономит много времени в долгосрочной перспективе.

  • Установка  —  Общее:npm install, сокращенно:npm i.

  • Тест  —  Общее:npm test, сокращенно:npm t.

  • Справка  —  Общее:npm --help, сокращенно:npm -h.

  • Глобальные флаги —  Общие: --global, сокращенно:-g.

  • Сохранить как зависимости разработки - General:- save-dev, сокращенно:-D.

  • Параметры инициализации npm по умолчанию — общие:npm init --yesилиnpm init --force, сокращенно:npm init -yилиnpm init -f

мы знаем, используя-saveили-Sчтобы сохранить пакет, но теперь это значение по умолчанию. Чтобы установить пакет без его сохранения, вы можете использовать——no-saveлоготип.

Менее распространенные сочетания клавиш

Есть также несколько менее распространенных ярлыков, а именно:

  • Информация об инсталляционном пакете будет добавлена ​​вoptionalDependencies(зависимость от необязательного этапа) - Общее:--save-optional, сокращенно:-O.

  • Точно установить указанную версию модуля - общее:--save-optional, сокращенно:-O.

Если вам нужно сохранить пакет npm локально или выбрать набор доступных пакетов с помощью загрузки одного файла, вы можете использовать--save-bundleили-Bсвяжите их вместе и используйтеnpm packПолучите пачку.

ярлык для рута

.Нотация обычно используется для обозначения корневого каталога приложения, точки входа приложения в терминологии npm, т.е.package.jsonуказано как "main" стоимость

{
  "main": "index.js"
}

Этот ярлык также можно использовать для таких вещей, какnpx create-react-app .такая команда. Следовательно, можно запуститьnpx create-react-app ., Вместо того, чтобы использоватьnpx create-react-app my-appсоздать новыйmy-appсодержание.

2. Установите свойства инициализации npm по умолчанию

при бегеnpm initПри запуске нового проекта вы можете снова и снова вводить данные конфигурации. Если да, то вы можете быть главным ответственным за проект. Иногда, чтобы сэкономить время, вы можете установить значения по умолчанию для этих полей, например:

npm config set init.author.name "Joe Bloggs"
npm config set init.author.email "JoebLoggs@gmail.com"
npm config set init.author.url "Joebloggs.com"
npm config set init.license "MIT"

Чтобы проверить, правильно ли добавлены эти свойства, введите в терминалеnpm config editПросмотр информации о профиле. Конечно, вы также можете редактировать информацию непосредственно в открытом файле конфигурации. Если вы хотите изменить глобальноеnpmустановить, использоватьnpm config edit -g.

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

echo "" > $(npm config get userconfig)
npm config edit

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

echo "" > $(npm config get globalconfig)
npm config --global edit

3. Сделайте скрипты кроссплатформенными

Любой код, который запускается в командной строке, рискует столкнуться с проблемами совместимости, особенно между системами на основе Windows и Unix (включая Mac и Linux). Это не проблема, если вы работаете только над конкретным проектом, но во многих случаях кросс-платформенная совместимость необходима: любой проект с открытым исходным кодом или совместный проект, а также примеры и обучающие проекты должны работать независимо от операционной системы. система что есть.

К счастью, решение простое. Есть несколько вариантов на выбор, но лучшие из нихcross-env. использоватьnpm i -D cross-envУстановите его как зависимость разработки. Затем включите ключевое слово перед любыми переменными среды.cross-env,так:

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/wepack.config.js"
  }
}

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

  • rimrafМожет быть установлен глобально для запуска кроссплатформенных скриптов

  • ShellJS— это переносимая реализация команд оболочки Unix в Node.js API.

4. Запустите скрипты параллельно

можно использовать&&для последовательного запуска двух или более процессов. Но как насчет параллельного запуска скриптов?Для этого мы можем выбирать из различных пакетов npm.concurrentа такжеnpm-run-allявляется самым популярным решением.

Сначала установите зависимости разработки через npm i -D одновременно. Затем добавьте его в скрипт в следующем формате:

{
  "start": "concurrently \"command1 arg\" \"command2 arg\""
}

5. Запустите скрипт в другом каталоге

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

Первый — вручную нажать cd и выполнить соответствующую команду:

cd folder && npm start && cd ..

Но есть более элегантное решение, которое заключается в использовании--prefixФлаг указывает путь:

npm start --prefix path/to/your/folder

Ниже приведен пример этого решения в рабочем приложении, которое мы хотим запустить на фронтенде (в каталоге клиента) и на бэкэнде (в каталоге сервера).npm start.

"start": "concurrently \"(npm start --prefix client)\" \"(npm start --prefix server)\"",

6. Отложите запуск скрипта, пока порт не будет готов

Часто во время разработки приложения с полным стеком нам может понадобиться запустить и сервер, и клиент.wait-onМодуль node предоставляет удобный способ гарантировать, что процессы будут выполняться только тогда, когда определенные процессы будут готовы: в нашем случае у нас есть определенный порт.

Например, это то, что я использую в проекте Electron, в котором используется интерфейс React.devсценарий. При одновременном использовании скрипт загружает слой презентации и окно Electron параллельно. Однако, используяwait-on,только вhttp://localhost:3000После запуска откроется окно Electron.

"dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",

Кроме того, React по умолчанию открывает окно браузера, но для разработки на Electron в этом нет необходимости. Мы можем передавать переменные окруженияBROWSER=noneчтобы отключить это поведение.

7. Перечислите и выберите доступные сценарии

списокpackage.jsonСкрипт, доступный в файле, прост: достаточно зайти в корень проекта и набрать в терминалеnpm run.

Но есть более удобный способ получить список скриптов, которые можно запустить сразу: Для этого глобально установите модуль NTL (npm task list):

npm i -g ntl

Затем в папке проекта запуститеntlможно получить список доступных сценариев и выбрать один из них для запуска.

8. Запуск пре- и пост-скриптов

вы можете быть знакомы сprebuildа такжеpostbuildТакие скрипты позволяют вам определять код для запуска до или после скрипта сборки. Но на самом деле,preа такжеpostМожет быть добавлен перед любым скриптом, включая пользовательские скрипты.

Это не только сделает ваш код чище, но и позволит запускатьpreа такжеpostсценарий.

9. Контроль версий приложений

Вместо того, чтобы вручную изменять версию приложения, npm предоставляет для этого несколько полезных ярлыков. Чтобы увеличить версию, запуститеnpm version加上major，minor或патч`:

// 1.0.0
npm version patch
// 1.0.1
npm version minor
// 1.1.0
npm version major
// 2.0.0

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

{
  "predeploy": "npm version patch"
}

10. Отредактируйте package.json из командной строки

package.jsonявляется обычнымjsonфайл, так что вы можете использовать библиотеку инструментовjsonРедактировать из командной строки. Это изменениеpackage.jsonПредоставляет еще один новый способ создания ярлыков помимо стандартных. Установить глобально:

npm install -g json

Затем вы можете использовать его для использования-IВнесите правки на месте. Например, чтобы добавить новый скрипт «foo» со значением «bar», напишите:

json -I -f package.json -e 'this.scripts.foo="bar"'

11. Автоматически настройте и откройте репозиторий github

еслиpackage.jsonВ файле есть "репозиторий", можете войтиnpm repoОткройте его в браузере по умолчанию.

Если ваш проект уже подключен к удаленному репозиторию и установлен в командной строкеgit, то вы можете использовать эту команду, чтобы найти репозиторий подключений

git config --get remote.origin.url

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

json -I -f package.json -e "this.repository=\"$(git config --get remote.origin.url)\""

12. Настроитьnpm initсценарий

Пойдем дальше и воспользуемся собственнымnpm initСкрипт, который берет URL-адрес репозитория GitHub и автоматически отправляет нашу первую фиксацию. В этом совете мы обсудим, как создать пользовательскийnpm initсценарий. В следующем (и последнем) трюке мы объединим git.

можно перенаправить в домашний каталог с помощью.npm-init.jsфайл для редактированияnpm initсценарий. (В Windows обычноc/Users/<用户名>, на Mac это/Users/<用户名>).

Давайте начнем с создания в нашем домашнем каталоге.nmm-init.jsдокумент. Чтобы убедитьсяnpm initуказывает на правильный файл, вы можете запустить:

npm config set init-module ~\.npm-init.js

в интеграцииgitПеред этим простой.npm-init.jsфайл, который эмулирует файл по умолчаниюnpm initЭта проблема

module.exports = {
  name: prompt('package name', basename || package.name),
  version: prompt('version', '0.0.0'),
  decription: prompt('description', ''),  
  main: prompt('entry point', 'index.js'),
  repository: prompt('git repository', ''),
  keywords: prompt(function (s) { return s.split(/\s+/) }),
  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),
  license: prompt('license', 'ISC')
}

каждый вопрос следуетnameInPackageмодель:prompt('nameInPrompt','defaultValue'). Чтобы без проблем установить значение по умолчанию, достаточно удалитьpromptметод.

Если вы хотите вернуться к значениям по умолчанию, просто удалите.npm-init.js.

13. Используйте собственный скрипт инициализации npm, чтобы зафиксировать свой первый коммит на GitHub.

Чтобы объединить команду git в.npm-init.jsфайл, вам нужен способ управления командной строкой. Для этого мы можем использоватьchild_processмодуль. Включите его в начало файла, потому что нам нужно толькоexecSyncфункцию, поэтому вы можете получить ее самостоятельно, используя синтаксис присваивания деструктора:

const { execSync } = require('child_process');

Я также создал вспомогательную функцию, которая выводит результат функции на консоль:

function run(func) {
  console.log(execSync(func).toString())
}

Наконец, нам будет предложено ввести URL-адрес репозитория GitHub, если он предоставлен, мы сгенерируемREADME.mdфайл и начнем нашу первую фиксацию.

repository: prompt('github repository url', '', function (url) {
  if (url) {
    run('touch README.md');
    run('git init');
    run('git add README.md');
    run('git commit -m "first commit"');
    run(`git remote add origin ${url}`);
    run('git push -u origin master');
  }
  return url;
})

В основном,.npm-init.jsФайл примерно такой:

const { execSync } = require('child_process');

function run(func) {
  console.log(execSync(func).toString())
}

module.exports = {
  name: prompt('package name', basename || package.name),
  version: prompt('version', '0.0.0'),
  decription: prompt('description', ''),
  main: prompt('entry point', 'index.js'),
  keywords: prompt(function (s) { return s.split(/\s+/) }),
  author: prompt('author', 'Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)'),
  license: prompt('license', 'ISC'),
  repository: prompt('github repository url', '', function (url) {
    if (url) {
      run('touch README.md');
      run('git init');
      run('git add README.md');
      run('git commit -m "first commit"');
      run(`git remote add origin ${url}`);
      run('git push -u origin master');
    }
    return url;
  }),
}

файл package.json:

{
  "name": "Custom npm init",
  "version": "0.0.0",
  "decription": "A test project, to demonstrate a custom npm init script.",
  "main": "index.js",
  "keywords": [],
  "author": "Joe Bloggs <joe.bloggs@gmail.com> (joebloggs.com)",
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JoeBloggs/custom.git"
  },
  "bugs": {
    "url": "https://github.com/JoeBloggs/custom/issues"
  },
  "homepage": "https://github.com/JoeBloggs/custom#readme"
}

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

В целом, надеюсь, этот пост дал вам представление о том, чего вы можете достичь с помощью npm, и показал некоторые способы повышения производительности — знаете ли вы общие ярлыки или максимально используете скрипты.package.jsonили напишите собственную версиюnpm init.

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

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории