2017年1月19日星期四

SPFx-node_modules,package.json和其他节点概念的概述

N.B.这是一个伴随帖子 避免SharePoint框架(SPFx)开发中的依赖性问题

任何有用的SharePoint框架(SPFx)解决方案都将使用外部JavaScript库–无论是较大的框架(例如React或Angular),还是较小的,更集中的库(例如LoDash,moment.js或其他)。由于SPFx基于基于node.js的Web堆栈,因此将此类库集成到您的解决方案中的最佳方法通常是从 npm ,基于Internet的JavaScript软件包管理器。 Npm实际上等效于.NET世界中的NuGet。一旦您’用npm重新设置,开发人员只需运行 npm 安装 jQuery的 [或其他] 软件包的源代码将添加到您的应用程序中’的文件。与节点开发一样,该库将添加到“node_modules”子文件夹,现在可以在您的代码中引用它。

node_modules文件夹的作用

So the node_modules folder stores all your 依存关系. But it also stores any 依存关系 of 那些 , 等等等等。所以’可能很深的树形结构。例如,使用jQuery和React的应用程序可能看起来像这样:

 clip_image002

在此示例中,jQuery依赖于“cache-swap”, which also has 它的 own 依存关系 in 它的 node_modules文件夹。等等..

您的代码实际使用的模块随您的应用程序一起分发,因此一切都在运行时正常工作。 SharePoint Framework工具中内置的捆绑机制使用以下方法来解决此问题: 网络包 .

Ensuring 依存关系 are tracked with package.json

如果 - 保存 当添加带有 npm 安装 ,则将条目写入 package.json 应用程序中的文件’的目录。这进入“dependencies”部分,看起来像这样:

"jquery": "^3.1.1"

这里’s一个完整的package.json文件的示例:

 clip_image004

请注意上面那个版本号中的插入符号(^)。一世 ’稍后将讨论代字号和插入符的依赖关系。但是目的是 –save 标志是确保已记录依赖项。 node_modules文件夹本身通常*未*签入到源代码控制中(与所有NuGet软件包都不会采用相同的方式),部分原因是它很大且笨拙。相反,每个开发人员在他们的计算机上都有一个本地副本,并且共享的package.json文件在确保所有开发人员具有相同的文件中起着至关重要的作用。当其他开发人员随后从源代码管理中获取文件时,请运行 npm 安装 要么 npm 更新 commands will ensure all 依存关系 are restored on his/her machine, based on what’存储在package.json文件中。

我详细介绍 避免SharePoint框架开发中的依赖性问题, 如果开发人员忘记跟踪依赖性(带有--save标志或类似标志),则其他开发人员可能会丢失其计算机上的模块,并且代码对他们不起作用– they’会得到一个缺少的模块错误。但是,即使开发人员确实记得要指定--save标志,您也会在dev中遇到问题,因为 npm uses caret 依存关系 by default,这些是“floating version” dependency. I won’在这里不进一步讨论陷阱,因为我们’关于这篇文章的基本概念–但是与此相关的是语义版本控制(称为semver)的整个主题。

语义版本控制的简要概述

Semver是指npm软件包可以使用的不同类型的版本号。的 npm 文档中的semver页面 建议阅读,但是我’d说出您需要了解的核心内容:

  • 3部分版本号格式,即MAJOR.MINOR.PATCH,以及应更新每个编号的规则– see http://semver.org
  • package.json 中使用的不同形式的版本号

版本号形式包括:

类型

它能做什么

插入符依赖性

^ 3.1.1

允许同一主版本上的任何版本,即低于4.0.0的任何版本

波浪号依赖性

~3.1.1

允许使用同一次要版本上的任何版本,即低于3.2.0的任何版本

但是,我的上表只是一个简化,因为如果版本号为零,则npm处理事情的方式有所不同。此外,npm也支持其他形式,例如预发行版本,例如“1.0.0-alpha.1” and 标签 。我建议花时间在npm文档中,但是如果您喜欢其他格式,例如互联网上也有很多简化的帖子。 //nodesource.com/blog/semver-tilde-and-caret

设置npm默认值以获得跨开发人员的一致性

在其他地方’ve讨论了传递给npm命令的参数,例如与npm install一起使用的--save或--save-exact标志。但是,对于开发团队来说,一种有用的方法是在整个团队中设置默认值,这样每个开发人员都不必在每次运行命令时都记住某个标志。这可以通过以下两种方式完成:

  • 在每台机器上设置环境变量
  • 使用.npmrc文件–在项目,用户或全局级别

我喜欢在用户级别(例如,我的计算机上的C:\ users \ chris \ .npmrc)使用.npmrc文件的想法,并确保所有团队成员都将其安装到位。通过创建/编辑此文件,例如,我可以指定所有依赖性都应使用* exact *版本号保存到package.json中,而不是插入符号或波浪号依赖性。我可以通过在文件中添加以下内容来做到这一点:

保存= true
保存 -exact = true

现在,当任何开发人员安装软件包时,将与默认行为发生以下差异:

  • 即使开发人员意外忘记了--save标志,该依赖项也会自动添加到package.json中
  • 依赖项将添加一个确切的版本号,而不是插入号的版本号

这很有用,因为开发人员赢得了’不小心掉入了npm默认值可能导致的一些陷阱。

还检查了 保存前缀 config flag as an option to override caret 依存关系 (e.g. to change to tilde 依存关系).

概要

希望这是SharePoint框架下概念的一些有用的背景信息。从某些方面看,它似乎是一个全新的世界,但与此同时,我不’认为您必须是npm,模块,webpack等方面的完整专家才能提高工作效率。尽管我认为,建议对这些子主题进行一些额外的挖掘。玩得开心!

没意见: