博客地址: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文件。

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

SharePoint Framework 基于团队的开发(二)的更多相关文章

  1. SharePoint Framework 基于团队的开发(四)

    博客地址:http://blog.csdn.net/FoxDave 确保代码一致性和质量 软件开发团队常常同项目的一致性和高质量做斗争.不同的开发者有不同的编码风格和偏好.在每个团队都有技术优秀的独立 ...

  2. SharePoint Framework 基于团队的开发(一)

    博客地址:http://blog.csdn.net/FoxDave SharePoint Framework是新的用来构建SharePoint自定制的开发模型,它专注于客户端开发并用热门的开源工具gu ...

  3. SharePoint Framework 基于团队的开发(五)

    博客地址:http://blog.csdn.net/FoxDave 升级SharePoint Framework项目 部署SharePoint自定制解决方案到生产环境并不意味着生命周期的结束,因为还有 ...

  4. SharePoint Framework 基于团队的开发(三)

    博客地址:http://blog.csdn.net/FoxDave 用内部包进行开发 由于你的团队在开发客户端解决方案,你很可能构建通用代码库来在项目中重用.在很多情况下这种库包含的代码是内部所有的不 ...

  5. [SharePoint 2010] 自定义字段类型开发(二)

    在SharePoint 2010中实现View Action Button效果. http://www.sharepointblogs.be/blogs/vandest/archive/2008/06 ...

  6. SharePoint Framework 开发工具和库

    博客地址:http://blog.csdn.net/FoxDave SharePoint Framework包含一些客户端JavaScript库,你可以用来构建自己的解决方案.本文提供了你可以用来 ...

  7. SharePoint Framework 企业向导(二)

    博客地址:http://blog.csdn.net/FoxDave 开发者视角 SharePoint开发者,无论是新手还是有经验的,都可以从SPFx中获取一些东西.当前SPFx的发布版本专注于以一 ...

  8. Wizard Framework:一个自己开发的基于Windows Forms的向导开发框架

    最近因项目需要,我自己设计开发了一个基于Windows Forms的向导开发框架,目前我已经将其开源,并发布了一个NuGet安装包.比较囧的一件事是,当我发布了NuGet安装包以后,发现原来已经有一个 ...

  9. 【基于spark IM 的二次开发笔记】第一天 各种配置

    [基于spark IM 的二次开发笔记]第一天 各种配置 http://juforg.iteye.com/blog/1870487 http://www.igniterealtime.org/down ...

随机推荐

  1. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  2. ArrayList源码阅读笔记(1.8)

    目录 ArrayList类的注解阅读 ArrayList类的定义 属性的定义 ArrayList构造器 核心方法 普通方法 迭代器(iterator&ListIterator)实现 最后声明 ...

  3. 蚂蚁风险大脑亮相ATEC城市峰会:为数字经济时代做好“安全守护”

    2019年1月4日,以“数字金融新原力(The New Force of Digital Finance)”为主题的蚂蚁金服ATEC城市峰会在上海隆重举行.大会聚焦金融数字化转型,分享新技术的发展趋势 ...

  4. Phpstorm数组对齐设置

    进入 Editor > Code Style > PHP > Wrapping and Braces , 勾选 Align consecutive assignments 和 Ali ...

  5. 在阿里云开源镜像站中下载centOS7

    镜像的选择 第一步.下载镜像 阿里云开源镜像站:http://mirrors.aliyun.com/ 选择centos进入 如下图: 如下图:选择centos7 再选择isos(镜像目录) 继续下一步 ...

  6. cowboy源码分析(二)

    接 cowboy源码分析(一) 下面我们重点看看cowboy_protocol.erl代码 -module(cowboy_protocol). %% API. -export([start_link/ ...

  7. MariaDB主从复制,redis发布订阅,持久化,以及主从同步

      一. MariaDB主从复制 mysql基本操作 1 连接数据库 mysql -u root -p -h 127.0.0.1 mysql -u root -p -h 192.168.12.60 2 ...

  8. 『计算机视觉』Region Proposal by Guided Anchoring

    论文地址:Guided Anchoring 不得不佩服自媒体,直接找到了论文作者之一写了篇解析文章,这里给出链接,本文将引用一部分原作者的解析,减少我的打字量,也方便结合比照理解. 一.问题和思路 1 ...

  9. CentOS 7 配置nginx并默认强制使用https对http进行跳转

    1.安装nginx yum install nginx 2.启动nginx服务 service nginx start 3.开启防火墙80端口,云服务器和本地虚拟服务器各有不同,不再赘述. 4.访问你 ...

  10. Linux上文件恢复工具

    文件恢复工具extundelete官网:http://extundelete.sourceforge.net/ 使用方法,在页面里找到download,下载源码安装包:extundelete-0.2. ...