Несколько отличных рекомендаций по пакетам npm

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

Порекомендуйте несколько npmплагинов, посмотрим, что у них получится вместе! !

римраф

Команда UNIX rm -rf для узла. Необходимо удалить папки с файлами, и обычно используются следующие команды package.jsonscript:

{
  "scripts": {
    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage"
  },
  "devDependencies": {
    "rimraf": "^2.5.4",
  }
}

перекрестная оболочка

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

NODE_ENV=производство

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  },
  "devDependencies": {
    "cross-env": "^3.1.3",
  }
}

Получите это в коде и используйте егоprocess.env.NODE_ENV

дотенв

Vue cli также является подключаемым модулем для загрузки переменных среды с его помощью. Используйте следующим образом:

Вы можете указать переменные среды, поместив следующие файлы в корневой каталог вашего проекта:

.env

Файл окружения содержит только пары переменных окружения ключ=значение:

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

Его нужно загрузить, чтобы require('dotenv').config({ path: '.env' }) использовать process.env.FOO、process.env.VUE_APP_NOT_SECRET_CODE.

Как отличить переменные .env среды? следующее:

Создайте следующий каталог структуры проекта:

├── env
   ├── .env.dev
   ├── .env.test
   ├── .env.pre
   └── .env.prd
├── webpack.config.js

Соответствующие переменные следующие:

# .env.dev file
API_URL = https://www.bai0.com

# .env.test file
API_URL = https://www.bai1.com
 
# .env.pre file
API_URL = https://www.bai2.com
 
# .env.prd file
API_URL = https://www.bai3.com

При webpack.config.jsзагрузке envконфигурации:

require('dotenv').config({ path: path.resolve(__dirname, `./env/.env.${process.env.NODE_ENV}`) })

Затем package.jsonнажмите:

{
  "scripts": {
    "build": "cross-env NODE_ENV=pro webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=dev webpack --config webpack.config.js",
    "test": "cross-env NODE_ENV=test webpack --config webpack.config.js",
  },
   "devDependencies": {
    "cross-env": "^3.1.3",
    "dotenv": "16.0.3"
  }
}

исследователь

Это терминальная анкета и подключаемый модуль npm. Используйте следующим образом:

// index.js
const inquirer = require('inquirer');

inquirer.prompt([
   {
     type: 'input',
     name: 'input',
     message: 'your name',
     default: 'sanyuan',
   },
   {
     type: 'password',
     name: 'password',
     message: 'Please enter a password',
     default: 'sanyuan',
   },
   {
     type: 'confirm',
     name: 'confirm',
     message: 'Are you handsome?',
     default: true,
   },
   {
     type: 'list',
     name: 'list',
     message: 'list',
     choices: [1, 2, 3],
     default: 0, // index
   },
   {
     type: 'rawlist',
     name: 'rawlist',
     message: 'rawlist',
     choices: [1, 2, 3],
     default: 0,
   },
   {
     type: 'expand',
     message: 'Conflict on `file.js`: ',
     name: 'overwrite',
     choices: [
       {
         key: 'y',
         name: 'Overwrite',
         value: 'overwrite',
       },
       {
         key: 'a',
         name: 'Overwrite this one and all next',
         value: 'overwrite_all',
       },
       {
         key: 'd',
         name: 'Show diff',
         value: 'diff',
       },
     ],
   },

   {
     type: 'checkbox', // multi-choice space selection, i inverse selection, a selection all
     message: 'Select toppings',
     name: 'toppings',
     default: 'Pepperoni',
     choices: [
       {
         name: 'Pepperoni',
         checked: true,
       },
       {
         name: 'Ham',
       },
       {
         name: 'Ground Meat',
       },
       {
         name: 'Bacon',
       },
     ],
   },

]).then((answers) => {
   console.log('The result is:');
   console.log(answers);
});

Соответствующие свойства следующие:

/**
  * list: The question object must have attributes such as type, name, message, and choices. At the same time, the default option must be the position index of the default value in the choices array (Boolean); [1,2,3]
  * rawlist: Similar to the List type, the difference is that list is printed as an unordered list, while rawlist is printed as an ordered list; [1,2,3]
  * expand: The list is also generated, but an attribute needs to be added in the choices attribute: key, which is used to quickly select the answer to the question. Something like alias or shorthand. At the same time, the attribute value must be a lowercase letter [{key: a, value: 1}, {key: b, value: 2}]
  * checkbox: The rest of the items are similar to the list, the main difference is that it is selected in the form of a checkbox. At the same time, in the choices array, the option with the checked: true attribute is the default value.
  * confirm: Question, answer Y/N. If there is a default attribute, the attribute value should be Boolean type;
  * input: the input question value
  * password: the text value of the ciphertext input
  */
type PromptType = 'list' | 'rawlist' | 'expand' | 'checkbox' | 'confirm' | 'input' | 'password' | 'editor';

interface PromptProps{
   type: PromptType; // indicates the type of question
   name: string; // in the last obtained answers object, as the key of the current question
   message: string; // printed question title
   default: any; // default value
   choices: Array<any>; // selection collection
   validate(): boolean; // validation
   filter(): Array<any>; // filter
   when: Function | Boolean; // Accept the answers object input by the current user, and return true or false to determine whether the current question should be asked. Can also be a value of a simple type.
   pageSize: number; // Change the length of the line number when rendering list, rawlist, expand or checkbox.
}

сторож

Библиотека, которая может отслеживать изменения в папках, используется следующим образом:

const chokidar = require('chokidar');

// ./test  folder  
// ignored vue files
const watcher = chokidar.watch('./test', {
  ignored: /_[^\/].*_(.vue)?/,  // ignored specification
});

['add', 'change', 'unlink'].forEach(action => { // more : ['addDir', 'unlinkDir', 'error', 'raw']
  watcher.on(action, () => {
    console.log(`[action]: ${action}`)
  });
});

watcher.on('ready', () => {
  console.log('[ready]: =>')
});

['SIGINT', 'SIGTERM'].forEach(signal => {
  process.on(signal, () => {
    watcher.close();
  });
});

командир

Завершите node.jsрешение командной строки. Инструмент разработки CLI. Вот простой пример:

#!/usr/bin/env node

const commander = require('commander');
const program = new commander.Command();

async function main() {
  program
    .version(require('../package.json').version)
    .usage('<command> [options] ');

  program
    .command('serve')
    .description('develop watch')
    .action(async (...args) => {
      await require('../commands/serve')(...args);
    });

  program
    .command('build')
    .description('build')
    .action(async (...args) => {
      await require('../commands/build')(...args);
    });

  program
    .command('unit-test')
    .description('unit test')
    .action((...args) => require('../commands/unit-test')(...args));

  await program.parseAsync(process.argv);
}

main().catch((e) => {
  error(e);
  process.exit(1);
});

Затем package.jsonдобавьте в проект следующее:

{
 "name": "test-scripts",
 "version": "1.0.0",
 "bin": {
  "test-scripts": "bin/index.js"
 }   
}

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

{
  "scripts": {
    "test": "test-scripts unit-test ./tests/**/*.spec.js",
    "serve": "test-scripts serve",
    "build": "test-scripts build"
  },
  "devDependencies": {
    "test-scripts": "1.0.0"
  }
}

обычный журнал изменений-кли

Conventional Changelog CLIэто инструмент командной строки для создания журналов изменений в стиле Conventional Commits. Это поможет вам использовать Conventional Commitsспецификацию и создаст для вас журнал изменений, соответствующий этой спецификации.

Автоматически генерируется CHANGELOG.md Простое использование выглядит следующим образом:

{
  "scripts": {
    "version": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
    "postversion": "git push --tags && git push"
  },
  "devDependencies": {
    "conventional-changelog-cli": "^2.1.1"
  }
}

свго

Подключаемый модуль для оптимизации svgфайлов. Группа нацелена на svgоптимизацию некоторых бесполезных атрибутов, когда дизайнеры используют этот подключаемый модуль для экспорта. С точки зрения эффективности оптимизации это потрясающе: коэффициент оптимизации составляет от 50% до 60%.

zhangxinxuНагляднее сравнить так: До оптимизации:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path fill="#FFFFFF" d="M147.566,67.575c-3.979-3.24-4.355-3.337-8.9-5.64c-2.043-1.043-5.057,1.646-6.529,3.636L92,117.73
    L65.85,83.972c-1.478-1.988-4.205-2.72-6.25-1.782c-4.658,2.408-4.19,2.327-8.168,5.467c-1.817,1.466-1.932,4.082-0.456,6.065
    c0,0,28.183,36.5,31.592,40.896c5,6.274,14.09,5.965,18.864,0c3.521-4.498,46.59-61.078,46.59-61.078
    C149.499,71.55,149.385,68.937,147.566,67.575z"/>
</svg>

Оптимизировано:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path fill="#FFF" d="M147.566 67.575c-3.98-3.24-4.355-3.337-8.9-5.64-2.043-1.043-5.057 1.646-6.53 3.636L92 117.73 65.85 83.972c-1.478-1.988-4.205-2.72-6.25-1.782-4.658 2.408-4.19 2.327-8.168 5.467-1.817 1.466-1.932 4.082-.456 6.065 0 0 28.183 36.5 31.592 40.896 5 6.274 14.09 5.965 18.864 0 3.52-4.498 46.59-61.078 46.59-61.078 1.477-1.99 1.363-4.603-.456-5.965z"/></svg>

Простое использование заключается в следующем:

svgo -f ../path/to/folder/with/svg/files

or:

svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output

Пример использования одного файла

svgo test.svg test.min.svg

Конфигурация:

Options:
   -h, --help : Help help
   -v, --version : Version version
   -i INPUT, --input=INPUT : input file, "-" is standard input
   -s STRING, --string=STRING : Input SVG data string
   -f FOLDER, --folder=FOLDER : input folder, will optimize and rewrite all *.svg files
   -o OUTPUT, --output=OUTPUT : input file or folder (default same as input), "-" standard output
   -p PRECISION, --precision=PRECISION : set the decimal part of the number, override plugin parameters
   --config=CONFIG : configuration file to extend or replace default settings
   --disable=DISABLE : disable plugin by name
   --enable=ENABLE : enable plugin by name
   --datauri=DATAURI : input file as Data URI string (base64, URI encoded or unencoded)
   -q, --quiet : output error messages only, excluding normal status messages
   --pretty : make SVG pretty printable
   --show-plugins : show available and existing plugins

Arguments:
   INPUT : alias for --input
   OUTPUT : alias --output

svgson

Преобразуйте svg во встроенное jsonвыражение stringify, parseиспользуйте следующим образом:

const { parse, stringify } = require('svgson')

// ----------------------------
// Convert SVG to JSON AST
// ----------------------------
parse(`
  <svg>
    <line
      stroke= "#bada55"
      stroke-width= "2"
      stroke-linecap= "round"
      x1= "70"
      y1= "80"
      x2= "250"
      y2= "150">
    </line>
  </svg>`).then((json) => {
  console.log(JSON.stringify(json, null, 2))
  /*
    {
      name: 'svg',
      type: 'element',
      value: '',
      attributes: {},
      children: [
        {
          name: 'line',
          type: 'element',
          value: '',
          attributes: {
            stroke: '#bada55',
            'stroke-width': '2',
            'stroke-linecap': 'round',
            x1: '70',
            y1: '80',
            x2: '250',
            y2: '150'
          },
          children: []
        }
      ]
    }
  */

  // -------------------------------
  // Convert JSON AST back to SVG
  // -------------------------------
  const mysvg = stringify(json)
  /* returns the SVG as string */
})

оболочки

Shelljs — это анализатор языка сценариев в Node.js с богатыми и мощными базовыми разрешениями для операций (Windows/Linux/OS X). Суть Shelljs — это уровень подключаемых модулей инкапсуляции команд на основе узла, так что разработчики интерфейса не могут полагаться ни на Linux, ни на инструменты преобразования, подобные cmder

Основное использование:

const shell = require('shelljs');

// rm -rf
shell.rm('-rf', `dist/`);

// ls
shell.exec('ls');

// copy
shell.cp('-R', `../../${FULL_NAME}`, `${FULL_NAME}`);

// cd ../
shell.cd(PROJECT_AS_NAME);
shell.cd('..');

мел

Пакет chalk предназначен для изменения стиля строк в консоли, в том числе:

• Стиль шрифта (жирный, скрытый и т. д.)
• Цвет шрифта
• фоновый цвет

const chalk = require('chalk'); // A library tobeautify console output

console.log(chalk.blue.bgRed('Hello world!'));

  console.log( chalk.blue.underline.bold('with a blue substring'));

  console.log(`
  CPU: ${chalk.red('90%')}
  RAM: ${chalk.green('40%')}
  DISK: ${chalk.yellow('70%')}
  `);

  // You can define your own log style
  const log = console.log;
  const error = chalk.bold.red;
  const warning = chalk.keyword('orange');
  
  log(error('Error!'));
  log(warning('Warning!'));

скачать-git-repo

Загрузите и извлеките репозиторий git (GitHub, GitLab, Bitbucket) с узла. В основном используется для clipull кода шаблона

метод:download(repository, destination, options, callback)

• репозиторий: адрес репозитория загрузки шаблона
• пункт назначения: где скачать файлы шаблонов хранилища локально,
• варианты: другие параметры клон: используйте команду git clone для загрузки шаблона

Основное использование:

const download = reruire('download-git-repo')

const url = '';
download(url, name, {clone:ture}, function (err) {
 
})

ора

Пакет ora используется для отображения эффекта загрузки, аналогичного loadingэффекту страницы интерфейса. Способ его использования следующий:

const ora = require('ora');
const spinner = ora('downloading template...');
// start download
spinner.start();

// download failed call
spinner.fail();
// download success call
spinner.succeed();

руль

Handlebars — это простой язык шаблонов.

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

const Handlebars = require("handlebars");
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Jack" }));

<script>Вы можете передать шаблон в браузер, включив его в тег.

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script

Скомпилируйте шаблоны в JavaScript, используя Handlebars.compile

const source = document.getElementById("entry-template").innerHTML;
const template = Handlebars.compile(source);

const context = { title: "hi", body: "hello world!" };
const html = template(context);

Результат:

<div class="entry">
  <h1>hi</h1>
  <div class="body">
    hello world！
  </div>
</div>

лог-символы

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

import logSymbols from 'log-symbols';

console.log(logSymbols.success, 'Finished successfully!');
// Terminals with Unicode support:     ✔ Finished successfully!
// Terminals without Unicode support:  √ Finished successfully!

Исходный код также очень прост:

import chalk from 'chalk';
import isUnicodeSupported from 'is-unicode-supported';

const main = {
	info: chalk.blue('ℹ'),
	success: chalk.green('✔'),
	warning: chalk.yellow('⚠'),
	error: chalk.red('✖'),
};

const fallback = {
	info: chalk.blue('i'),
	success: chalk.green('√'),
	warning: chalk.yellow('‼'),
	error: chalk.red('×'),
};

const logSymbols = isUnicodeSupported() ? main : fallback;

export default logSymbols;

шарик

globЭта библиотека может легко найти все файлы в указанном каталоге, например:

const glob =require("glob");
glob('src/**')

Это означает соответствие srcвсем файлам в каталоге. Но следует отметить, что он не соответствует файлам, начинающимся с . по умолчанию. Если вам нужно сопоставить файлы, начинающиеся с ., вам нужно указать dot: trueэтот элемент конфигурации.

glob('src/**', { dot: true });

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

glob('src/**', { ignore: ['node_modules/**'], dot: true })

Вот файл структуры:

.
└── test
    ├── .a
    ├── .b
    │   ├── d.js
    │   └── .f
    └── c.txt

Используйте следующий метод для сопоставления

glob('test/**', { dot: true, ignore: ['.b/**'] })

выходной результат

[
  'test',
  'test/.a',
  'test/.b',
  'test/.b/.f',
  'test/.b/d.js',
  'test/.c.txt'
]

Глобби

globby, основан на globи дополнен

Расширенные возможности:

• Обещанный интерфейс
• Сопоставление нескольких шаблонов
• отрицательное совпадение с образцом
• Расширенный каталог: dir → dir/**/*
• Поддержка .gitignore

import { globby } from 'globby';

(async () => {
	const paths = await globby('images', {
		expandDirectories: {
			files: ['cat', 'unicorn', '*.jpg'],
			extensions: ['png']
		}
	});

	console.log(paths);
	//=> ['cat.png', 'unicorn.png', 'cow.jpg', 'rainbow.jpg']
})();

Лерна

LernaЭто инструмент управления для управления JavaScriptпроектами. Ниже приведено простое использование

npm install lerna -g
lerna init  #Initialize a Lerna project

npmClientзамените lerna.json наyarn

{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
  "useWorkspaces": true,
  "version": "0.0.0",
  "npmClient": "yarn",
  "packages": [
    "packages/*"
  ]
}

Чтобы установить пакет для всех packageпроектов lodashuse:

packageУстановить зависимости для всех проектов

lerna bootstrap

npm-run-all

npm-run-allCross-platform, инструмент командной строки, который может запускать несколько сценариев npm параллельно или последовательно. , реализовать команду для выполнения всех зависимостей установки проекта, запуска и упаковки. Простое использование выглядит следующим образом:

{
   "scripts": {
    "install:hash": "cd app-vue-hash && npm install",
    "install:history": "cd app-vue-history && npm install",
    "install:main": "cd main && npm install",
    "install-all": "npm-run-all install:*",
    "start:hash": "cd app-vue-hash && npm run serve ",
    "start:history": "cd app-vue-history && npm run serve",
    "start:main": "cd main && npm run serve",
    "start-all": "npm-run-all --parallel start:*",
    "serve-all": "npm-run-all --parallel start:*",
    "build:hash": "cd app-vue-hash && npm run build",
    "build:history": "cd app-vue-history && npm run build",
    "build:main": "cd main && npm run build",
    "build-all": "npm-run-all --parallel build:*"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5"
  }
}

• Комплексная команда npm-run-all (последовательная и параллельная)
• run-s Сокращение, эквивалентное npm-run-all -s (последовательно) запускать npm-скрипты
• сокращение run-p, эквивалентное npm-run-all -p параллельный (параллельный) запуск npm-скриптов

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .