Wie man bessere JavaScript-Module entwickelt

Viele haben auf npm ihre selbst entwickelten JavaScript-Module veröffentlicht und während der Verwendung einiger Module habe ich oft den Gedanken gehabt: "Dieser Modul ist sehr nützlich, aber es wäre besser, wenn er xxx könnte". Daher wird dieser Artikel aus der Perspektive des Modulnutzers zusammenfassen, wie ein Modul besser nutzbar gemacht werden kann.

Bereitstellung von ES6 Modul-Eingang

webpack und rollup unterstützen die ES6 Modul führt einige statische Optimierungen durch (z.B. Tree Shaking und Scope Hoisting), die alle priorisiert das Feld module in package.json als ES6 Modul-Eingang, wenn es kein module gibt, wird das Feld main als Eingang des CommonJS-Moduls gelesen. Die gängige Praxis ist: die Verwendung von ES6 Quellcode in Syntax schreiben und dann mit einem Modul-Packaging-Tool und einem Syntax-Transformationstool CommonJS-Module und ES6 Modul, so können Sie gleichzeitig die Felder main und module bereitstellen.

Bereitstellung von TypeScript-Typdeklarationsdateien

Wenn Ihre Benutzer TypeScript verwenden, aber Ihre Module keine Deklarationsdateien bereitstellen, müssen sie in ihrem Projekt Code hinzufügen, um TypeScript-Kompilationsfehler zu vermeiden; und dies ist nicht nur für Benutzer freundlich, die TypeScript verwenden, da die meisten Code-Editoren (Webstorm, VS Code usw.) TypeScript-Typdeklarationen erkennen können, sie können据此提供 genauere Code-Hinweise und eine Warnung geben, wenn der Benutzer falsche Parameterzahlen oder Typen eingibt.

Der beste Weg ist es, Ihr Modul mit TypeScript zu schreiben, da die Typdeklarationen automatisch generiert werden. Außerdem können Sie eine Deklarationsdatei manuell nach dem Dokument pflegen. Sie können eine Datei index.d.ts im Stammverzeichnis Ihres Moduls hinzufügen oder den Pfad zur Deklarationsdatei im Feld typings im package.json angeben.

Modul gleichzeitig in Node.js und im Browser ausführen

Sie können bestimmen, ob das Modul derzeit in Node.js oder im Browser ausgeführt wird, indem Sie überprüfen, ob es eine globale Variable namens window gibt (z.B. !!typeof window) und dann Ihre Funktion auf verschiedene Weise implementieren.

Diese Methode ist häufig verwendet, aber wenn der Benutzer ein Modul-Packwerkzeug verwendet, führt dies dazu, dass sowohl die Implementierung von Node.js als auch die von Browsern in die endgültige Ausgabedatei einbezogen werden. Für dieses Problem hat die Open-Source-Community den Vorschlag gemacht, das Feld browser im package.json hinzuzufügen, und sowohl webpack als auch rollup unterstützen diesen Feld currently.

Das browser-Feld hat zwei Verwendungsmöglichkeiten:

Geben Sie dem browser-Feld einen Pfad als Modul-Eingang für die Verwendung im Browser, aber beachten Sie, dass das Packwerkzeug den Pfad im browser-Feld bevorzugt als Modul-Eingang verwendet, sodass das Feld module ignoriert wird. Dies führt dazu, dass der Packwerkzeug Ihren Code nicht optimieren kann. Weitere Informationen finden Sie in diesem Problem.

Wenn Sie nur einige Dateien ersetzen möchten, können Sie ein Objekt deklarieren.

Nehmen wir an, Ihr Modul enthält zwei Dateien: http.js und xhr.js. Die erste Datei sendet Anfragen mit dem http-Modul von Node.js, die zweite Datei realisiert die gleiche Funktion mit XMLHTTPRequest im Browser. Um die richtigen Dateien zu verwenden, sollte Ihr Modulcode stets require(‘./path/to/http.js') und deklarieren Sie sie im package.json:

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

Auf diese Weise wird der Packwerkzeug nur den Code von xhr.js in die endgültige Ausgabedatei einbetten, wenn Ihr Modul im Packwerkzeug verwendet wird.

Ausrüstung Ihres Projekts mit verschiedenen Diensten

Die meisten JavaScript-Projekte sind Open Source und die Open-Source-Community bietet viele kostenlose Dienste für Open-Source-Projekte an, die Ihrem Projekt eine stärkere Unterstützung bieten können. Hier sind einige der häufig verwendeten aufgeführt.

一个项目最常使用的服务就是持续集成。持续集成服务能将测试、代码风格检测、打包等任务放在服务器上，并在你提交代码时自动运行，常用的有Travis CI、CircleCI和AppVeyor。Travis CI对开源项目免费，提供Linux与OS X运行环境；CircleCI对开源与私有项目都免费，但每个月有 1500分钟的运行时间限制；AppVeyor提供Windows运行环境，同样对开源项目免费。

运行完测试之后，你还可以将测试覆盖率上传到Coveralls。这个服务能让你在线浏览代码的测试覆盖情况。

如果你想让你的模块在各个版本的各种浏览器、平台下得到充分的测试，你还可以使用Sauce Labs和BrowserStack，它们都是对开源项目免费的，但需要发邮件申请。

最后，Shields IO提供了各种图标，这些图标能为你的项目提供很多额外信息，包括但不限于npm版本号、下载量、测试通过状态、测试覆盖率、文件大小、依赖是否过期等。

以上就是我们分享给大家的如何开发出好用的JavaScript模块的全部内容。大家如果还有任何不明白的地方可以在下方的留言区域讨论，感谢你对呐喊教程的支持。

声明：本文内容来源于互联网，版权归原作者所有。内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（在发送邮件时，请将#替换为@进行举报，并提供相关证据。一经查实，本站将立即删除涉嫌侵权内容。）