将静态jsp资源加载到产品index.html中

也许我错过了一些东西，但这是我的问题:在运行gulp dist进入"生产模式"后，所有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

这种行为在我遇到的许多项目中很常见，所以可能我错过了什么…我应该配置一些东西来进行一些调整吗?也许调用另一个任务来创建我自己的"生产模式"html?

欢呼

您必须处理您的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>

相关内容

最新更新

热门标签：