将静态 jspm 资源加载到生产 index.html？

Question

也许我遗漏了什么，但这是我的问题：在运行 gulp dist 继续 "production mode" 之后，所有 javascript 文件都捆绑好了，但在 index.html 中仍然有对 jspm_packages 文件夹的引用，并且还有一些 JavaScript 文件如下：

   <head>
       <link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap@3.3.4/css/bootstrap.css"/>
       <link rel="stylesheet" href="build/css/main.css"/>
    </head>
    <body>
        <script src="jspm_packages/system.js"></script>
        <script src="config.js"></script> 
        <script>
             System.import('build/js/main.js!jsx');
        </script>
    </body>

所有这些引用不再存在于 gulp dist 任务中创建的 dist 文件夹中。

这是 GitHub 上的一个 React+JSPM 项目的用例示例：https://github.com/tinkertrain/jspm-react

这种行为在我遇到的许多项目中都很常见，所以我可能遗漏了一些东西...... 我应该配置一些东西来做一些调整吗？也许调用另一个任务来创建我自己的 "production mode" html?

干杯

Answer 1

您必须处理您的 html 并将所有 <link> 和 <script> 替换为生产的 <link> 和 <script>。可以说有很多方法和工具可以做到这一点，但正如你所说你正在使用 Gulp 你可能想检查 Gulp-html-replace.

基本上，我们的想法是添加一些 html 注释，指示您选择的工具将这些标签替换为生产标签。你的情况

   <head>
    <!-- build:css -->
     <link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap@3.3.4/css/bootstrap.css"/>
     <link rel="stylesheet" href="build/css/main.css"/>
   <!-- endbuild -->
   </head>

    <!-- build:js -->
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script> 
    <script>
         System.import('build/js/main.js!jsx');
    </script>
    <!-- endbuild -->

将产生：

  <head>
   <link rel="stylesheet" href="styles.min.css">
  </head>
  <body>
   <script src="js/bundle.min.js"></script> 
  </body>

将静态 jspm 资源加载到生产 index.html？

load static jspm resources to production index.html?

javascript

gulp

systemjs

jspm