如何使用JSPM

时间:2017-06-12 10:54:14

标签: javascript angularjs systemjs bundling-and-minification jspm

我的应用程序使用JSPM和SystemJS进行模块加载,并使用angular。

我的config.js文件有角度图,如:

"angular": "github:angular/bower-angular@1.5.8"

所以当我import angular from 'angular'时,我从config.js文件中指定的 Path 获取angular.js文件。那很好。

现在要求是我想在应用程序中使用缩小的第三方javascript文件(angular.min.js)。但是jspm registry中没有缩小文件 因此,我的应用程序的初始加载时间很长,因为有很多大文件,例如angular.js,browser.js等需要花费太多时间才能加载。

我知道,我可以做jspm bundle递归缩小所有依赖文件,包括供应商的文件。但我的问题是:

1 - 是否可以直接使用JSPM的供应商缩小文件( angular.min.js )?使用供应商的缩小文件而不是将它们缩小为自己是好的,不是吗?

2 - 如果上面的一个不可能,那么我如何只捆绑我的应用程序特定文件并仍然可以使用(单独捆绑)minified angular.js文件?

这里推荐的方法是什么?

1 个答案:

答案 0 :(得分:1)

在config.js文件中,您可以使用名称映射任何文件,并在浏览器中由SystemJs导入

所以你可能会做类似

的事情

" angular":" jspm_packages /...../ angular.min" (文件的路径)

然而,推荐的方法是捆绑和缩小所有供应商文件,如您所述,单独捆绑您的应用程序特定文件

你可以用Gulp或Grunt这样的东西来生成2个文件

网上有很多关于如何做到这一点的例子,但这里有一个让你入门的例子 https://blog.dmbcllc.com/using-gulp-to-bundle-minify-and-cache-bust/

生成这两个文件后,您可以通过脚本标记

将它们添加到html页面

<script src="Your File Path"></script>

选项2是首选方法,我建议花时间进行设置,因为你只需要做一次就可以了解它