您现在的位置是:首页 > 文章详情

用 ES6 构建新一代可复用 JS 模块

日期:2018-05-31点击:409

你是不是也在为可以使用ES6的新特性而兴奋,却不太确定应该从哪开始,或者如何开始?不止你一个人这样!我已经花了一年半的时间去解决这个幸福的难题。在这段时间里 JavaScript 工具链中有几个令人兴奋的突破。

这些突破让我们可以用ES6书写完全的JS模块,而不会为了一些基本的条件而妥协,比如testing,linting 和(最重要的)其他人可以轻易理解我们所写的代码。

在这篇文章中,我们集中精力在如何用ES6构建JS模块,并且无论你在你的网站或者app中使用CommonJS,AMD(asynchronous module definition)或者普通的网页script引入,这个模块都可以轻易被引用。

The Tools

在这个系列文章的第一部分和第二部分,我们来看一下这些卓越的工具们。在这篇文章中,我们详细说明如何编写,编译,打包代码;而在第二篇文章会集中在linting,formatting 和 testing(利用 JSCS,ESLint,mocha,Chai,Karma 和 Istanbul)。让我们来看看在这篇文章中涉及到的工具:

  • Babel(刚刚度过了它的第一个生日)可以把ES6代码转化为ES5代码,不仅简单,而且优雅。

  • Webpack,webpack平寂了我们组里的“模块战争”,我们每个人都镇定得使用着webpack来应付_一切_(CommonJS,AMD 和 ES6)。它也在打包独立的ES6库方面做得非常棒——这是我们在过去一直渴望看到的。

  • Gulp一个强大的自动化构建工具。

The Goal
WRITE IN ES6, USE IN ES5

我们将要讨论的是书写客户端(client-side)ES6 _libraries_,而不是整个网站或者 app 。(无论是在你的开源项目里或者是在你工作中的软件项目,这是可以在不同的项目中可复用的代码。)”等一下!“,你可能会想:”这个难道不是在浏览器支持ES6之后才能实现的吗?“

你是对的!然而,我们利用上面提到的Babel可以把ES6代码转化为ES5代码,在大多数情况下现在就可以实现我们的目标。

MAKE IT EASY FOR ANYONE TO CONSUME

我们目标的第二部分是写一个无论在什么模块规范下都可以使用的JS模块。AMD死忠饭?你会得到一个可用的模块。CommonJS 加 browserify 才是你的最爱?没问题!你会得到一个可用的模块。或者你对AMD和CommonJS不感冒,你只是想要在你的页面上加一个

你会看到我们已经依赖legoQuotes.js(就在babel的browser-polyfill.js下面),就像其他依赖一样使用


原文发布时间:2016-02-09

原文作者:MrDream

本文来源掘金如需转载请紧急联系作者

原文链接:https://yq.aliyun.com/articles/610197
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章