如何开发出更好的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 相关文章推荐
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
使用异步组件优化Vue应用程序的性能
Apr 28 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
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
通过python检测字符串的字母
2020/02/18 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
环保标语口号
2014/06/13 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
金榜题名主持词
2015/07/02 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书