VueJS爬坑记(2) - 依赖问题和Webpack打包

起因

从入坑Webpack已经有一个礼拜了,在这期间我注意到,通过Vue脚手架搭建的Web应用程序通常需要非常多的依赖,但是如果遇上多人协作共同开发这个APP的话,如果依赖问题处理不了,应该是一件十分尴尬的事。还有一点就是Vue的应用程序不可能在生产环境下也用NodeJS跑,这是在开发过程中维拉方便调试和新增或删除模块而使用npm的run功能来快速搭建一个支持热更新的Web应用程序。

填坑!

解决代码迁移带来的依赖问题

就像上文中说到的,我们构建一个应用程序时遇到多人协作,将Node模块一块儿共享出去是完全不符合常理的,而且这期间我在GitHub上寻找了一些使用Vue-cli或者是其他NodeJS项目构建的WebApp,发现代码结构中并没有存放NodeJS模块的.node_modules目录,通过.gitignore将这个目录排除在外,说明依赖信息应该装载在某个文件中(目前还在研究),而他人只需要把其他主要的代码克隆下来,在根据这个依赖信息寻找必要的NodeJS包。

那么问题来了:手动安装全部的依赖并不合理,一定还有某种自动化的方式将依赖部署到位。

经过GitHub上类似项目的README和百度、Google的查找,同时经过自己的验证,最终发现了两种方法可以达到目的:

  • 通过npm install
    这是最简单的方法,一键搞定所有依赖关系,只需在项目根目录下运行下面的命令:

npm install

再执行:

npm run dev

即可完成所有的依赖工作,并在本地NodeJS服务器中以开发模式运行。

  • 通过yarn install
    yarn是又一个强大的工具,和npm使用相似:

首先要通过npm安装yarn:

npm install yarn -g

然后进入项目根目录:

yarn install

搞定。

Webpack打包

既然使用了Webpack,从名字上就能看出,我们的应用程序如果调试完毕,进入生产环境,就一定可以通过Webpack进行相关的打包上线的工作,但是我目前对Webpack知之甚少,但是通过查阅资料,我逐渐明白使用npm run命令的确可以将一个应用程序“打包”,而这个过程按照我个人的理解是:将开发环境下的零散的代码(包括组件、图片、文档之类的),打包成一个包,也就是一个“紧凑的代码”。

于是,通过查阅资料,我在项目根目录下使用npm run build命令,几秒钟过后,npm提示“编译”成功,在根目录下生成了一个dist/目录,进去一看,果然如我所料,Webpack将所有的JS代码融合成了一个超大的JS源码(我怀疑连依赖的JS也一起写进去了),这也就恰好印证了Webpack这个名词:将Web应用程序打包成一个紧凑的包!

总结

总的来说这两个坑填的还是挺水的,不过确实让我受益良多,至少通过自己动手验证让我了解了一个Web应用程序是如何从零一步步构建起来的。

将最新的文章发送到你的邮箱

展示评论