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

JavaScript库格式

不同的JavaScript库的编译和打包方式各不相同。一些是以模块的方式打包的,而另一些是以纯脚本运行在全局的方式。当从URL加载JavaScript库时,你要如何注册外部脚本取决于脚本的格式。脚本的格式有许多中:AMD、UMD或CommonJS,但只需要知道该脚本是不是一个模块即可。

在注册打包为模块的脚本时,唯一需要做的事情是指定特定脚本需要从哪个URL加载。另一方面,非模块化脚本需要最小范围脚本的URL(即.min.js)和全局名称变量。举个例子,Angular v1.x是一个非模块化脚本,我们在SPFx项目中将它注册为外部资源,用如下代码指定它的URL和全局名称:

"angular": {
"path": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js",
"globalName": "angular"
}

指定globalName属性的值很重要,它与脚本使用的名称一致。这样使脚本能够正确地将自己暴露给其他依赖它的东西。

ngOfficeUIFabric - 一个依赖Angular的UMD模块。由于已经在模块内进行了依赖处理,在注册它时你只需要指定URL:

"ng-office-ui-fabric": "https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.12.3/ngOfficeUiFabric.js"

jQuery时一个AMD脚本,注册它比较简单,即

"jquery": "https://code.jquery.com/jquery-2.2.4.js"

现在想象一下,你想要使用jQuery中的一个插件,它时一个非模块化脚本,这时如果使用以下代码进行注册:

"jquery": "https://code.jquery.com/jquery-2.2.4.js",
"simpleWeather": {
"path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js",
"globalName": "jQuery"
}

加载web部件很可能会发生错误,因为有可能两个脚本是并行加载的,插件无法进行注册。

之前提到过,SPFx允许你指定非模块化插件的依赖关系。这些依赖在globalDependencies属性中设置:

"jquery": "https://code.jquery.com/jquery-2.2.4.js",
"simpleWeather": {
"path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js",
"globalName": "jQuery",
"globalDependencies": [ "jquery" ]
}

每一个依赖必须指向config/config.json文件中的externals部分。
现在如果你想要编译项目,你会遇到另一个错误,提示你不能依赖非模块化脚本。

要解决这个问题,你需要注册jQuery为非模块化脚本:

"jquery": {
"path": "https://code.jquery.com/jquery-2.1.1.min.js",
"globalName": "jQuery"
},
"simpleWeather": {
"path": "https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js",
"globalName": "jQuery",
"globalDependencies": [ "jquery" ]
}

这样simpleWeather脚本就会在jQuery加载之后在自行注册了。
很难手工判断想要加载的脚本是模块化还是非模块化脚本,特别是最小化的脚本。如果你的脚本在一个公网URL承载,你可以使用免费的Rencore SharePoint Framework Script Check工具来确定脚本的类型。而且,该工具让你能够知道承载脚本的位置是否正确配置。

非模块化脚本的考虑

许多JavaScript库和脚本是非模块化脚本。虽然SPFx支持加载非模块化脚本,你还是应该避免去使用它们。

非模块化脚本在页面的全局被注册:一个web部件加载的脚本对页面上的其他web部件都可用。如果你有两个web部件使用了不同版本的jQuery并且都加载为非模块化脚本,最后加载的web部件会覆盖之前加载的jQuery版本。你能想象,这可能会导致不可预见的结果并且不容易调试问题。模块结构通过隔离脚本并防止它们互相影响解决了这个问题。

什么时候考虑捆绑打包

捆绑打包已存在的JavaScript库到你的web部件会生成尺寸较大的web部件文件,导致页面的低性能。尽管我们应该避免这样使用,但一些情况下还是有优势的。

如果你编译一个标准的解决方案,这个解决方案会在很多内网运行,那么整体捆绑打包会帮助你确保你的web部件会正确工作,因为你不知道你的解决方案安装在哪里,不知道那里能不能从外部资源加载脚本,那么整体打包就会确保你引用的资源都可以成功加载到。

如果你的解决方案由许多web部件组成,有一些共享的函数,那么可以考虑将这些共享的函数单独编译成库并作为外部资源在所有web部件中引用。

总结

通过前面一篇和本篇,在编译客户端web部件时,SPFx允许我们捆绑打包将这些库跟web部件打包到一起,或者作为外部资源加载。虽然从外部URL加载已存在的库是推荐的方式,还是有一些情况采用捆绑打包更适合。

SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式的更多相关文章

  1. SharePoint Framework 在web部件中使用已存在的JavaScript库 - 捆绑打包和外部引用

    博客地址:http://blog.csdn.net/FoxDave 在构建SPFx客户端web部件时,你可以使用公网已有的JavaScript库来构建强大的解决方案.但是在使用的时候你需要考虑你引用的 ...

  2. SharePoint Framework 在web部件中使用第三方样式 - 将第三方样式打到包中

    博客地址:http://blog.csdn.net/FoxDave 有许多第三方库可以帮助我们构建丰富的SharePoint Framework客户端web部件.并且这些JavaScript脚本常常包 ...

  3. SharePoint Framework 向web部件中添加外部库

    博客地址:http://blog.csdn.net/FoxDave 在进行开发的时候,你很可能会想要引用一些公开的JavaScript库到你的项目中,本文将会介绍如何打包和共享这些库. 打包脚本 默认 ...

  4. SharePoint Framework 在Visual Studio Code中调试你的托管解决方案

    博客地址:http://blog.csdn.net/FoxDave 上一篇介绍了如何在本地调试你的SharePoint Framework解决方案,本篇介绍如何调试你的SharePoint Onl ...

  5. SharePoint Framework 概述

    博客地址:http://blog.csdn.net/FoxDave 本文翻译自新出的SharePoint Framework概述介绍文章,原文地址:http://dev.office.com/sh ...

  6. SharePoint Framework 把你的客户端web部件连接到SharePoint

    博客地址:http://blog.csdn.net/FoxDave 把你的web部件连接到SharePoint来访问SharePoint中的功能和数据,为终端用户提供更完整的体验.本篇会基于之前构 ...

  7. Sharepoint 2013内容查询Web部件自定义显示样式(实战)

    分享人:广州华软 星尘 一. 前言 在进行Sharepoint开发时,经常会遇到内容展示个性化需求的问题,当然如果通过自定义开发控件对于内容展示的需求基本都可以很好的解决,但自定义开发也有不好的地方, ...

  8. SharePoint每日小贴士Web部件

    SharePoint每日小贴士Web部件 项目描写叙述         此Web部件从指定SP自己定义列表或一个选定的 RSS源选择一个随机项目.并显示一张图片.标题和一个Tip.         适 ...

  9. SharePoint Framework 配置Office 365开发者租户

    博客地址:http://blog.csdn.net/FoxDave 你需要一个Office 365开发者租户来使用预览版SharePoint Framework构建和发布客户端web部件.你的租户 ...

随机推荐

  1. 记录一下最近的解决的坑爹bug

    最近解决的bug长得都很别致啊,记录一下 一 :天气插件引用报403 项目里有一个天气插件引用一直报403 后来确定原因是headers里缺少referer源,无法访问资源的服务器,再后来又发现项目引 ...

  2. 网站性能测试工具 webbench 的安装和使用

    1.webbench的下载和安装 wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz sudo tar xvf we ...

  3. spring环境搭建

    1.导入jar包: 2.配置文件 — applicationContext.xml:  添加schema约束,位置:spring-framework-3.2.0.RELEASE—>docs—&g ...

  4. JVM垃圾回收(三)- GC算法:基础

    GC算法:基础 在介绍GC算法在实际场景中的实现之前,我们先定义一些必要的术语,以及GC算法的基本准则.具体的细节会因收集器的不同而稍有区别,但是基本上来说,所有的收集器会关注以下两个方面: 找出所有 ...

  5. LeetCode--027--移除元素(java)

    给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...

  6. 剑指Offer-和为S的连续正数序列

    题目: 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久,他就 ...

  7. OO第一单元总结分析

    综述:本模块的内容为表达式求导,目的是通过不同项的嵌套四则运算求导这一基本思路熟悉面向对象的继承与接口机制. 一.三次作业总结分析 1.第一次作业: 1.1 作业分析 盼望着,盼望着,鸽了一年的oo终 ...

  8. C#操作SQLServer2012类

    public class SqlServerService { public string CONN_STRING { get; set; } = "Data Source=.;Databa ...

  9. Sublime Text3安装evernote插件

    关键字 Markdown编辑器.Evernote.Sublime Text3   正文 Sublime Text3安装evernote插件方法如下: 1.使用Package Control安装ever ...

  10. Java Design Pattern(Factory,Singleton,Prototype,Proxy)

    一.Factory 设计模式: the most common pattern,create a new object ,eg. A a=new A();工厂模式的好处:工厂模式可以做到把创建对象单独 ...