如何开发出更好的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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
ECMAScript6轮播图实践知识总结
Aug 17 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
js中作用域的实例解析
Mar 16 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
JavaScript 反射学习技巧
Oct 16 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
给多个地址发邮件的类
2006/10/09 PHP
PHP安全配置详细说明
2011/09/26 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
2015/08/26 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
Node.js的npm包管理器基础使用教程
2016/05/26 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
python操作xml文件详细介绍
2014/06/09 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
python 实现A*算法的示例代码
2018/08/13 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python爬虫判断招聘信息是否存在的实例代码
2020/11/20 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
办公室驾驶员岗位职责
2013/11/15 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
个人评语大全
2014/05/04 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
党支部工作总结2015
2015/04/01 职场文书