如何开发出更好的JavaScript模块


Posted in Javascript onDecember 22, 2017

不少人都曾经在 npm 上发布过自己开发的 JavaScript 模块,而在使用一些模块的过程中,我经常产生“这个模块很有用,但如果能 xxx 就更好了”的想法。所以,本文将站在模块使用者的角度总结一下,如何能让模块变得更好用。

提供 ES6 模块的入口

webpack 和 rollup 都支持对 ES6 模块做一些静态优化(例如 Tree Shaking 和 Scope Hoisting),它们都会优先读取 package.json 中的 module 字段作为 ES6 模块的入口,若没有 module 才会读取 main 字段作为 CommonJS 模块的入口。通常的做法是:使用 ES6 语法编写源码,然后用模块打包工具结合语法转换工具生成 CommonJS 模块和 ES6 模块,这样就可以同时提供 main 和 module 字段了。

提供 TypeScript 的类型声明文件

如果你的用户使用了 TypeScript 但你的模块没有提供声明文件,他们就不得不在项目中添加一段代码避免 TypeScript 的编译错误;另外,这样做并不只是对使用 TypeScript 的用户友好,因为大部分代码编辑器(Webstorm、VS Code 等)都能识别 TypeScript 的类型声明,它们可以据此提供更精准的代码提示并在用户传入错误的参数个数或类型时给出提示。

最好的做法是使用 TypeScript 编写你的模块,编译时会自动生成类型声明。除此之外,你也可以参照文档手动维护一份声明文件。你可以在你的模块根目录下添加 index.d.ts 文件,或者在 package.json 中声明 typings 字段提供声明文件的位置。

让模块同时在 Node.js 与浏览器中运行

你可以通过检测是否有名为 window 的全局变量(例如 !!typeof window)来判断模块当前是运行在 Node.js 还是浏览器中,然后使用不同的方式实现你的功能。

这种方法比较常见,但如果用户使用了模块打包工具,这样做会导致 Node.js 与浏览器的实现方式都会被包含在最终的输出文件中。针对这个问题,开源社区提出了在 package.json 中添加 browser 字段的提议,目前 webpack 和 rollup 都已经支持这个字段了。

browser 字段有两种使用方式:

给 browser 字段提供一个文件路径作为在浏览器端使用时的模块入口,但需要注意的是,打包工具会优先使用 browser 字段指定的文件路径作为模块入口,所以你的 module 字段会被忽略,这会导致打包工具不会优化你的代码。详细信息请参考这个问题。

如果你只想替换其中一些文件,你可以声明一个对象。

举个例子,假设你的模块里有两个文件:http.js 和 xhr.js,第一个文件使用 Node.js 中的 http 模块发起请求,另一个使用浏览器中的 XMLHTTPRequest 实现了同样的功能。为了使用适当的文件,你的模块代码中应该始终 require(‘./path/to/http.js'),并在 package.json 中声明:

{
 "browser": {

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

这样一来,当你的模块在打包工具中使用时,打包工具只会将 xhr.js 的代码包含在最终的输出文件中。

使用各种服务武装你的项目

大部分 JavaScript 项目都是开源的,而开源社区也提供了很多针对开源项目的免费服务,它们可以给你的项目提供更有力的帮助,这里列举几个比较常用的。

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

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

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

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

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

Javascript 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
js变量以及其作用域详解
Jul 18 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
JS数字千分位格式化实现方法总结
Dec 16 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 #Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 #Javascript
JavaScript伪数组用法实例分析
Dec 22 #Javascript
JavaScript中Object值合并方法详解
Dec 22 #Javascript
Angular简单验证功能示例
Dec 22 #Javascript
Angular实现的table表格排序功能完整示例
Dec 22 #Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 #Javascript
You might like
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
10个实用的PHP代码片段
2011/09/02 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
jQuery的一些注意
2006/12/06 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python 生成器协程运算实例
2017/09/04 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
解决python 上传图片限制格式问题
2019/10/30 Python
python中如何使用insert函数
2020/01/09 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
世界上最好的帽子:Tilley
2016/11/27 全球购物
国贸专业的职业规划范文
2014/01/23 职场文书
文明城市创建标语
2014/06/16 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python