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

时间:2016-06-23 18:45:51

标签: javascript node.js systemjs jspm http2

我正在努力找出一个与开发工作流程相配的良好生产工作流程。需要从构建中排除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或者被遗忘?

1 个答案:

答案 0 :(得分:-1)

我之前没有使用systemJS捆绑东西,但是为了jquery工作而映射CDN?即您可以通过以下方式将CDN用于角度和rxjs:

map: {
    ...
    '@angular': 'https://npmcdn.com/@angular',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'jquery': 'http://jquery.cdn'
}

这样的事情能为您解决问题吗?我收集它意味着你将无法将jquery用作全局并且需要导入它,但是转移到这样的工作流可能会有所帮助吗?