1

おそらく私は何かが欠けていますが、ここに私の問題があります: 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 プロジェクトの 1 つからの使用例です: https://github.com/tinkertrain/jspm-react

この動作は、私が遭遇した多くのプロジェクトに共通しているため、おそらく何かが欠けています...調整を行うために何かを構成する必要がありますか? 別のタスクを呼び出して、独自の「本番モード」html を作成することはできますか?

乾杯

4

1 に答える 1

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>
于 2015-08-26T14:14:07.413 に答える