大发5分11选5_极速5分3D

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

时间:2020-01-04 21:56:32 出处:大发5分11选5_极速5分3D

"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部件很可能性会趋于稳定错误,可能性有可能性有一有两个 脚本是并行加载的,插件无法进行注册。

"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次责。

现在可能性以后我编译项目,让他遇到另一有一有两个 错误,提示你都可不可以 了依赖非模块化脚本。

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

要补救这种大问题,你还要注册jQuery为非模块化脚本:

有些JavaScript库和脚本是非模块化脚本。人太好SPFx支持加载非模块化脚本,你还是应该补救去使用它们。

可能性你编译一有一有两个 标准的补救方案,这种补救方案会在所以内网运行,没办法 整体捆绑打包会帮助你确保你的web部件会正确工作,可能性你他不知道你的补救方案安装进哪里,他不知道那还要都可不可以 了从内外部资源加载脚本,没办法 整体打包就会确保你引用的资源还要成功加载到。

"angular": {

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

"globalName": "angular"

}

指定globalName属性的值很重要,它与脚本使用的名称一致。另一有一有两个 使脚本要能正确地将个人暴露给有些依赖它的东西。

ngOfficeUIFabric - 一有一有两个 依赖Angular的UMD模块。可能性可能性在模块内进行了依赖补救,在注册它时你只还要指定URL:

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

以后提到过,SPFx允许你指定非模块化插件的依赖关系。哪此依赖在globalDependencies属性中设置:

非模块化脚本在页面的全局被注册:一有一有两个 web部件加载的脚本对页面上的有些web部件都可用。可能性你有有一有两个 web部件使用了不同版本的jQuery否则 都加载为非模块化脚本,最后加载的web部件会覆盖以后加载的jQuery版本。你能想象,这可能性会原应不可预见的结果否则 不容易调试大问题。模块行态通过隔离脚本并补救它们互相影响补救了这种大问题。

JavaScript库格式

可能性你的补救方案由有些web部件组成,有有些共享的函数,没办法 还要考虑将哪此共享的函数单独编译成库并作为内外部资源在所有web部件中引用。

总结

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

通过前面一篇和本篇,在编译客户端web部件时,SPFx允许我们都歌词 捆绑打包将哪此库跟web部件打包到一起去,可能性作为内外部资源加载。人太好从内外部URL加载已趋于稳定的库是推荐的依据,还是有有些状态采用捆绑打包更适合。

"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库到你的web部件会生成尺寸较大的web部件文件,原应页面的低性能。尽管我们都歌词 应该补救另一有一有两个 使用,但有些状态下还是有优势的。

热门

热门标签