我正在尝试找到一个与开发工作流程相得益彰的良好生产工作流程。需要从构建中排除 1MB 的外部库,然后使用 CDN 单独托管它们。所以我们有这个:
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script src="build.js"></script>
<script>
System.import('app/main.js');
</script>
这很好,main.js 中的任何内容都将被忽略,因为它已经包含在 build.js 中。尽管我猜这意味着什么时候该返回开发热构建,我们必须先删除 build.js?
所以现在我想分离生产环境的外部依赖:
builder.buildStatic('app/main.js', 'build.js', {
externals: ['jquery'],
globalName: 'App',
globalDeps: {
'jquery': 'jQuery'
}
});
当我们这样做时,我们需要添加一行:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2 jquery.min.js"></script>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script src="build.js"></script>
<script>
System.import('app/main.js');
</script>
这意味着当我们切换回开发版本时,jQuery 将被双重捆绑到 main.js 中?然后是来自 SystemJS 的片段:
System.config({
bundles: {
'build/core': ['jquery']
}
});
System.import('app/main.js');
不确定如何使用它,因为现在我们不会使用 CDN 来托管 jQuery。所以对我来说,这有点像陷阱 22。JSPM 很棒,因为它为您提供包管理,但要在生产中使用这些包,您需要在外部使用它们。因此,如果我们无论如何都必须在页面中包含脚本标记,那么这是否首先违背了 JSPM 的目的?
关于如何创建一个简单易用的开发/生产工作流程的任何想法,当我们想要在两者之间切换时我们不必更改代码?我们想要这样的东西:
$ npm run production
$ npm run development
这样,在运行两者之前无需更改页面中的任何类型的 HTML。我已经在不同的 SystemJS 和 JSPM 工作流程中寻找了几个小时,但似乎无法找到解决所有问题的方法。
SystemJS 是否在任何地方的生产中使用,或者这仍被视为一项实验性技术?我看到有一个新的即将到来的 HTTP/2 标准,它将动态加载模块,那么这是否意味着它要切换到 SystemJS 或被遗忘?
最佳答案
我以前没有使用过 systemJS 来捆绑东西,但是为 jquery 映射 CDN 是否有效?即,您可以通过以下方式将 CDN 用于 angular 和 rxjs:
map: {
...
'@angular': 'https://npmcdn.com/@angular',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'jquery': 'http://jquery.cdn'
}
这样的事情能解决您的问题吗?据我所知,这意味着您将无法将 jquery 用作全局变量,需要将其导入,但转向这样的工作流程可能会有帮助?
关于javascript - 使用 SystemJS 的生产工作流和通过 CDN 托管的外部依赖项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37999495/