如何开发出更好的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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
js闭包实现按秒计数
Apr 23 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php 生成短网址原理及代码
2014/01/23 PHP
php的dl函数用法实例
2014/11/06 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
2016/12/01 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Python的re模块正则表达式操作
2016/05/25 Python
python用户管理系统的实例讲解
2017/12/23 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Python 硬币兑换问题
2019/07/29 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
高中美术教学反思
2014/01/19 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
驳回起诉裁定书
2015/05/19 职场文书
护士医德医风心得体会
2016/01/25 职场文书
2016年乡镇七一建党节活动总结
2016/04/05 职场文书
python实现层次聚类的方法
2021/11/01 Python
利用Python实现模拟登录知乎
2022/05/25 Python