如果不了解npm和ES6模块那就看过来

JavaScript的格局日新月异，网站和应用的依赖关系也随之而变。这篇文章适合那些大量使用script标签来加载JS的程序员，随着网页数目增多和项目规模的扩大，他们感觉到依赖管理变得越来越笨重。如果想要深入了解每一个细节，同时想对CommonJS和AMD规范做比较的话，请参考AxelRauschmayer的ExploringES6book,尤其是第17章。什么是JavaScript模块？JavaScript模块允许我们把项目中的代码分散成一个个单独的文件，或者使用通过npm安装的开源模块。用模块化的方式写代码有助于（项目的）组织、维护、测试，以及最重要的依赖管理。当我们编写JavaScript时，理想情况是保障每个模块都专注一件事并把这件事做好。这种分工可以让我们在需要某个模块时再去做相应的加载。模块化是是npm背后的核心原则。当需要某个特定的功能时，我们能安装相应的模块并加载到应用当中。随着时间推移，我们发现那种大而全的框架变少了，看到更多的是专注一件事并把这件事做好的小型模块。举个例子，大部分人都用过jQuery。这个库包含了从CSS操作到ajax调用几乎全部的方法。现如今，很多人开始迁移到React这类库上，我们常常需要加载额外的模块来完成一些任务如ajax或路由。这篇文章将会带你大致了解npm和ES6模块的使用。对于其它一些的包管理（如Bower）和模块加载工具（如CommonJS和AMD），已经有大量的文章和话题在讨论了。不管你是做Node开发还是前端开发，我相信ES6模块和npm是未来的方向。如果你去看当下流行的开源项目，像React或lodash，你会发现他们都采用了ES6模块＋npm。当前的开发流程很多JavaScript的开发流程是这样的：1.找一个符合要求的插件或库然后从GitHub上下载。2.通过script标签加载到网站。3.用全局变量调用或以jQuery插件的方式调用。这类开发流程这么多年来表现一直不错，除了这几个问题：1.插件必须手动升级－很难及时得知（该插件）何时修复了严重的bug或是有哪些新功能可用。2.混乱的源代码版本控制－所有依赖都要加入源代码，当库更新时会导致非常不愉快的结果（版本问题）。3.基本没有依赖管理－很多脚本的功能是重复的，如果分成小模块则可以很轻松的实现共享。4.代码污染和潜在的全局命名空间冲突。编写模块化的JavaScript这种理念并不新鲜，不过随着ES6的到来和业界将npm作为JavaScript的首选包管理工具，我们看到大量的开发摒弃了从前的工作流程，迁移到使用ES6和npm的标准化流程上来。等等，npm？那不是Node专用的吗？很久以前，npm是作为Node.js的包管理工具起步的，如今它已经进化为JavaScript和前端开发的包管理工具。现在，我们可以把库的安装过程简化为2个步骤：1.从npm安装依赖，例如：JavaScript1npminstalllodash--save2.在当前文件中导入刚才的依赖，例如：JavaScript1import_from'lodash';这套开发流程还需要很多的工作要做，同时关于模块的导入导出也有很多需要学习，现在让我们来深入了解一下吧。模块背后的理念我们使用导入和导出语句来在文件之间共享代码（变量、函数、数据、任何代码），而不是把所有代码加载到全局命名空间下。每一个模块导入需要的依赖，也可以为其它文件导出需要的代码。让代码在浏览器运行还需要一个打包的步骤，我们会在文章的后面加以讨论，现在，让我们专注于JavaScript模块背后的核心理念。创建自己的模块假设我们正在构建一个在线购物的应用，需要一个文件存放所有的辅助函数。我们可以创建一个模块命名为helpers.js，文件包含一些辅助函数－formatPrice(price)、addTax(price)和discountPrice(price,percentage)，还有一些关于该在线商城的变量。我们的helpers.js文件看起来如下：JavaScript12345678910111213141516consttaxRate=0.13;constcouponCodes=['BLACKFRIDAY','FREESHIP','HOHOHO'];functionformatPrice(price){//..做一些格式化returnformattedPrice;}functionaddTax(price){returnprice*(1+taxRate);}functiondiscountPrice(price,percentage){returnprice*(1-percentage);}现在，每个文件都持有自己的本地函数和变量，只要没有明确地导出，它们绝不会渗透到其它文件的作用域中。在上面的例子里，我们可能不想让其它模块访问taxRate变量，但在模块内部确实需要这个变量。我们怎么让其它模块访问到这些函数和变量呢？答案是导出它们。在ES6中有两种导出方式，命名导出和默认导出。由于需要让多个函数和couponCodes变量被访问到，我们使用命名导出。稍后我们会加以详述。从模块导出代码，最简单直白的方式就是在行首加上export关键字，像这样：JavaScript12345678910consttaxRate=0.13;exportconstcouponCodes=['BLACKFRIDAY','FREESHIP','HOHOHO'];exportfunctionformatPrice(price){//..做一些格式化returnformattedPrice;}//...我们也可以在最后再导出：JavaScript1234exportcouponCodes;exportformatPrice;exportaddTax;exportdiscountPrice;或者里一次性导出：JavaScript1export{couponCodes,formatPrice,addTax,discountPrice};还有很多其它很便捷的导出方式，如果碰到有些情形无法满足你的工作需求，请查看MDN的文档。默认导出前面提到，从模块中有两种导出方式－命名或默认。上面的例子用了命名导出。如果要让其它模块导入这些出口，我们必须要知道我们希望导入的变量/函数的名称－接下来会有一个例子说明。使用命名导出的好处是你可以从一个模块中导出多项内容。另一种导出方式是默认导出。当需要导出多个变量／函数时，可以用命名导出，当你的模块只需要导出一个变量/函数的时候，使用默认导出就行了。尽管你可以在一个模块中同时使用默认导出和命名导出，我还是建议你每个模块只采用一种方式。默认导出的例子是一个单独的StorePickerReact组件，或者是某个数组。例如，下面这个数组需要让其它组件访问到，我们可以用默认导出。JavaScript123456//people.jsconstfullNames=['DrewMinns','HeatherPayne',];constfirstNames=fullNames.map(name=name.split('').shift());exportdefaultfirstNames;//[Drew,Heather,Kristen,Wes,Ryan]和上面一样，你可以在想要导出的函数到前面加上exportdefault关键字。JavaScript1exportdefaultfunctionyell(name){return`HEY${name.toUpperCase()}!!`}导入自己创建的模块既然我们已经把代码分成了小模块并且按需求导出了，现在可以向前一步，把这些模块导入到应用的其它部分了。如果要导入的模块是代码库的一部分，我们使用import语句，然后指定文件相对于当前模块的路径－跟你平时在HTML中导入资源路径或CSS背景图是一样的。你会发现我们去掉了.js后缀，因为后缀不是必需的。需要注意并不是导入一次模块，整个应用就能像全局变量一样去访问了。每当模块依赖其它模块时－比如我们上面的代码需要一个lodash方法－我们必须将它导入进来。如果我们有5个模块都需要同样的lodash函数，我们需要导入5次。这有助于保持作用域清晰，同时让模块更加轻便且可重复使用。导入命名导出我们最先导出的时我们的辅助模块。这里使用的是命名导出，现在，有很多种方式将它们导入：JavaScript12345678910111213//把所有内容作为一个对象的属性或方法导入import*ashfrom'./helpers';//然后使用constdisplayTotal=h.formatPrice(5000);//或者直接把所有内容导入到当前模块的作用域import*from'./helpers';constdisplayTotal=addTax(1000);//我不推荐这种风格，因为不够明确，可能会导致代码难以维护//或者分组挑选需要的导入import{couponCodes,discountPrice}from'./helpers';constdiscount=discountPrice(500,0.33);导入默认导出如果你回想一下，我们还从people.js中导出了一个firstnames的数组，这是那个模块唯一需要导出的部分。默认导出可以用任何名称导入－不需要知道导出的变量、函数、或类的名称。JavaScript12345678910importfirstNamesfrom'./people';//或importnamesfrom'./people';//或importelephantsfrom'./people';//这些都可以导入firstnames数组//你还可以这样导入默认导出import*asstufffrom'./people'consttheNames=stuff.default从npm导入模块我们使用的大量模块来自于npm。不管你需要一个像jQuery这种完整库，还是lodash这种只有工具函数的库，又或是superagent这种提供Ajax请求的库，我们都可以用npm来安装。JavaScript12345npminstalljquery--savenpminstalllodash--savenpminstallsuperagent--save//orallinonego:npmijquerylodashsuperagent-S一旦这些包存在在node_modules/目录下了，就可把它们导入到我们的代码。默认情况下，Babel会把ES6的导入语句编译成CommonJS。所以，只要使用一个可以解析模块语法的打包工具（webpack或者browserify），你就可以玩转node_modules/目录了。我们打导入语句只需要包含模块的名称就可以了。其它打包工具可能需要插件或配置才能从node_modules/目录导入。JavaScript123456//导入整个库或插件import$from'jquery';//然后正常使用就可以了$('.cta').on('click',function(){alert('Yaclickedit!');});上面的代码能正常工作是因为jQuery是按CommonJS模式导出的，Babel将ES6的import语句转译使其适配jQuery的CommonJS导出（语句）。我们再试试superagent。和jQuery一样，superagent对整个库使用了CommonJS规范的默认导出，所以我们可以任意命名－一般命名成request。JavaScript12345678//将模块导入importrequestfrom'superagent';//然后使用！request.get('