SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式

点击有惊喜


博客地址:http://blog.****.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部件很可能会发生错误,因为有可能两个脚本是并行加载的,插件无法进行注册。

SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式

之前提到过,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部分。
现在如果你想要编译项目,你会遇到另一个错误,提示你不能依赖非模块化脚本。

SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式


点击有惊喜

SharePoint Framework 在web部件中使用已存在的JavaScript库 - JavaScript库的格式