如何开发出更好的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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
js基于canvas实现时钟组件
Feb 07 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
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
python的正则表达式re模块的常用方法
2013/03/09 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
python中p-value的实现方式
2019/12/16 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
高中数学教师求职信
2013/10/30 职场文书
企业元宵节主持词
2014/03/25 职场文书
合伙协议书
2014/04/23 职场文书
大学社团计划书
2014/05/01 职场文书
运动会方队口号
2014/06/07 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
社区党支部承诺书
2015/04/29 职场文书
python批量创建变量并赋值操作
2021/06/03 Python
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
Linux中sftp常用命令整理
2022/06/28 Servers