四度空间

专注.NET、SharePoint

SharePoint Framework 基于团队的开发(二)

博客地址:http://blog.csdn.net/FoxDave

本篇介绍SPFx项目的一般开发流程。SharePoint Framework基于开源的工具链,也遵循开源技术栈中其他项目的开发流程。那么在一个典型的SPFx项目中,这种流程是什么样的呢?

创建SPFx项目

在使用SPFx进行SharePoint自定制时,第一步是使用Yeoman生成器创建新的SPFx项目。建议每个SPFx项目中只使用一种框架,否则会比较乱也不好维护,且有冲突。

锁定依赖库的版本

使用生成器创建好的SPFx项目包含了SPFx包和其他必须的包以保证解决方案能正确执行。比如在你构建web部件时,你可能想将Angular或jQuery包含到项目中。在SPFx项目中,这些依赖的包是通过npm安装的。每个依赖引用都是一个特定版本的Node.js包。默认情况下使用一定范围的版本库来指向依赖,帮助开发者轻松保持最新的引用。

通常情况下,为了防止编译期间对项目的修改,会对源代码进行加锁控制。开发者在添加新引用时可以调用npm install --save-exact来指定版本。开发者可以使用nmp shrinkwrap命令来锁定所有内容。一旦执行该命令,它会生成一个所有依赖库引用的列表以及版本信息并记录在npm-shrinkwrap.json文件中,这个文件在回退时也需要用到。

注意:如果你的项目中有安装在node_modules文件夹中的没有在package.json文件中列出的包,你就会在生成npm-shrinkwrap.json文件时看到错误。要解决这个问题,你需要将package.json中没有的包加进去,或者从node_modules文件夹中移除(将文件夹整个删掉也可以)。

将项目添加到源代码管理

项目组内的成员协同开发同一项目时我们一般会用如VSTS, TFS, SVN或者GIT这种源代码管理系统。具体的步骤可能会由于不同的系统而有些许不同。

例如对于GIT而言,SharePoint Framework项目由.gitignore文件定义哪些文件不包含在源码控制中。总之你需要确保源码控制中包含了必要的正确的文件而不包含其他文件。

注意不要将node_modules文件夹包含在源码控制中,该文件夹包含的项目需要的包是在npm install时自动安装的。并且有些包编译二进制文件时的进程是依赖于操作系统的,这样如果团队成员有工作在不同操作系统的情况,也会造成问题。

从源代码管理获取项目

在你第一次从源码管理系统获取项目时,项目中是没有SPFx相关的库的,你需要先要执行npm intall来安装这些依赖库,对于SPFx项目,它会根据package.json和npm-shrinkwrap.json文件来安装所有的包。

注意:安装包的时候需要确保互联网是连通的,包会从registry.npmjs.org下载,否则的话编译会失败。当然也是有解决办法的,例如使用shrinkpack将依赖库在源码控制中管理,相当于进行离线安装。

上文也提到过,对于编译成二进制文件的内容,不同的操作系统有不同的处理方式。比如你从Linux的Docker容器中获取依赖库,然后在windows系统上进行编译,就会得到所使用环境类型不匹配的错误。在开发时要注意这里。

再举个例子,存在这样一种情况,在你获取项目之后,其他人对依赖库进行了更新或追加,这时你需要运行npm install来获得最新的依赖库。

将包添加到你的项目

使用已存在的包来完成特定的开发任务能让你的效率更高。npmjs.com就是一个你可以在项目中使用的公共包库,但是需要注意你采用的包的内容和协议。

通过执行npm install <package> --save或npm install <package> --save-dev命令来将包添加到SPFx项目。例如npm install angular --save。save或save-dev参数确保包的信息会添加到package.json文件中,项目组的其他成员在更新依赖库时也能够及时获取到。一般情况下,对于运行时需要的库使用--save参数,而对于编译时使用的库则用--save-dev参数。

如果在安装包的时候不指定版本,npm会为你安装最新版本。如果你使用npm-shrinkwrap.json文件的话,npm会为你更新到该文件中定义的版本。或者你可以直接在npm install命令中指定版本,比如npm install angular@1.5.9 --save,该命令会安装指定的包并将版本信息更新到npm-shrinkwrap.json文件。

本篇就介绍到这里,下一篇会介绍如何使用内部包库。

posted on 2017-12-04 09:02  月飘冥  阅读(...)  评论(...编辑  收藏

My Links

Blog Stats