Как разработать mejores модули JavaScript

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

Предоставление входа ES6 модуля

Webpack и rollup поддерживают выполнение некоторых статических оптимизаций ES6 модулей (например, Tree Shaking и Scope Hoisting), они всегда сначала читают поле module в package.json в качестве входа ES6 модуля, если нет module, то читают поле main в качестве входа CommonJS модуля. Обычно практикой является: написание исходного кода на ES6 синтаксисе, а затем использование инструментов打包 модулей и инструментов преобразования синтаксиса для генерации модулей CommonJS и ES6, чтобы можно было предоставить поля main и module.

Предоставление файлов объявлений TypeScript

Если ваши пользователи используют TypeScript, но ваши модули не предоставляют файлы объявлений, им придётся добавить фрагмент кода в проекте, чтобы избежать компиляционных ошибок TypeScript; кроме того, это не только полезно для пользователей TypeScript, потому что большинство кодовых редакторов (Webstorm, VS Code и т.д.) могут распознавать типовые объявления TypeScript и предоставлять более точные подсказки кода, а также предупреждать пользователей о вводе неправильного количества или типа параметров.

Лучшим вариантом является написание вашего модуля на TypeScript, так как при компиляции автоматически генерируются типы. Кроме того, вы можете ручным образом поддерживать файл заявлений, следуя документации. Вы можете добавить файл index.d.ts в корневую директорию вашего модуля или указать положение файла заявлений в поле typings в package.json.

Запуск модуля одновременно в Node.js и браузере

Вы можете определить, запущен ли модуль в Node.js или браузере, через детекцию наличия глобальной переменной window (например, !!typeof window) и использовать различные методы для реализации вашей функции.

Этот метод используется довольно часто, но если пользователь использует инструмент модульной打包ки, это может привести к тому, что как реализация Node.js, так и реализация браузера будут включены в конечный файл вывода. В ответ на эту проблему开源 сообщество предложило добавить поле browser в package.json. В настоящее время webpack и rollup уже поддерживают это поле.

У поля browser есть два способа использования:

Предоставьте файловый путь для поля browser в качестве точки входа модуля при использовании в браузере, но учтите, что инструмент打包ки будет приоритетно использовать файловый путь, указанный в поле browser, поэтому ваше поле module будет проигнорировано, что приведет к тому, что инструмент打包ки не оптимизирует ваш код. Подробности см. в этой проблеме.

Если вы хотите заменить только некоторые файлы, вы можете声明 объект.

Рассмотрим пример: предположим, что в вашем модуле есть два файла: http.js и xhr.js. Первый файл использует модуль http в Node.js для发起 запросов, а второй реализует аналогичную функцию с помощью XMLHTTPRequest в браузере. Чтобы использовать соответствующие файлы, в вашем коде модуля всегда должен быть require(‘./path/to/http.js’), и в package.json должна быть указана:

{
 "browser": {
  "./path/to/http.js": "./path/to/xhr.js"
 }
}

Таким образом, когда ваш модуль используется в инструменте打包ки, инструмент-packager будет включать только код xhr.js в конечный файл вывода.

Оружайте свой проект различными службами

Большинство проектов JavaScript являются открытыми исходными кодами, и开源 сообщество также предоставляет множество бесплатных услуг для开源项目, которые могут предоставить вашему проекту более эффективную помощь. Вот несколько наиболее常用的。

Одной из самых часто используемых услуг в проекте является непрерывная интеграция. Услуги непрерывной интеграции могут поместить задачи тестирования, проверку стиля кода,打包 и т.д. на сервер и автоматически запускать их при提交е кода. Самыми популярными являются Travis CI, CircleCI и AppVeyor. Travis CI бесплатен для开源 проектов, предоставляет среду выполнения Linux и OS X; CircleCI бесплатен для как开源, так и коммерческих проектов, но每个月 имеет ограничение по времени выполнения в 1500 минут; AppVeyor предоставляет среду выполнения Windows и также бесплатен для开源 проектов.

После выполнения тестов вы также можете загрузить охват тестирования на Coveralls. Эта служба позволяет вам онлайн просматривать покрытие тестирования кода.

Если вы хотите, чтобы ваш модуль был полностью протестирован на различных версиях и платформах, вы можете использовать Sauce Labs и BrowserStack, они бесплатны для开源 проектов, но требуют отправки письма для запроса.

В конце концов, Shields IO предоставляет различные иконки, которые могут предоставить много дополнительной информации для вашего проекта, включая, но не ограничиваясь, номером версии npm, количеством загрузок, состоянием тестирования, охватом тестирования, размером файла, зависимостями, которые устарели и т.д.

Вот и все, что мы поделились с вами о том, как разработать полезные модули JavaScript. Если у вас есть какие-либо вопросы, вы можете обсудить их в области комментариев下方， спасибо за поддержку呐喊 руководства.

Заявление: контент этой статьи был получен из Интернета, авторские права принадлежат соответствующему владельцу, контент был предложен и загружен пользователями Интернета, этот сайт не имеет права собственности, не был обработан редакторами, и не несет ответственности за связанные с этим юридические последствия. Если вы обнаружите спорный контент, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для жалоб, и предоставьте соответствующие доказательства. При подтверждении факта нарушения авторских прав сайт немедленно удаляет спорный контент.