Question

也许我错过了什么，但这是我的问题：在运行gulp dist以继续＆＃34;生产模式＆＃34;之后，所有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

这种行为对于我遇到的很多项目来说很常见，所以可能我错过了一些东西...... 我应该配置一些东西来进行一些调整吗？可能会调用另一项任务来创建我自己的＆＃34;生产模式＆＃34; HTML？

干杯

Answer 1

您必须处理您的html并将所有<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？

1 个答案: