使用 SystemJS 和通过 CDN 托管的外部依赖项的生产工作流程

Posted 2023-02-19

【中文标题】使用 SystemJS 和通过 CDN 托管的外部依赖项的生产工作流程

【英文标题】：Production workflow with SystemJS and external dependencies hosted via CDN

【发布时间】：2016-10-26 06:03:52

【问题描述】：

我正在尝试找出一个与开发工作流程相得益彰的良好生产工作流程。需要从构建中排除 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的sn-p：

System.config(
    bundles: 
      'build/core': ['jquery']
    
);
System.import('app/main.js');

不确定如何使用它，因为现在我们不会使用 CDN 来托管 jQuery。所以对我来说，这有点像第 22 条问题。JSPM 很棒，因为它为您提供了包管理，但要在生产环境中使用这些包，您需要在外部使用它们。所以如果我们无论如何都必须在页面中包含脚本标签，那么这不是首先破坏了 JSPM 的目的吗？

关于如何创建一个简单易用的开发/生产工作流程的任何想法，当我们想要在两者之间切换时，我们不必更改代码？我们想要这样的东西：

$ npm 运行生产

$ npm 运行开发

这样，在运行这两者之前，无需在页面中更改任何类型的 html。我在不同的 SystemJS 和 JSPM 工作流程中寻找了几个小时，但似乎无法找到解决所有问题的方法。

SystemJS 是否已在任何地方用于生产，还是仍被视为一项实验性技术？我已经看到 HTTP/2 有一个新的即将推出的标准，它将动态加载模块，这是否意味着它会切换到 SystemJS 或被抛在后面？

【参考方案1】：

我之前没有使用 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 用作全局并且需要将其导入，但转向这样的工作流程可能会有所帮助？