1

この問題は非常に単純で一般的ですが、それでも適切な解決策を見つけることができませんでした。そのため、Stackoverflowの専門家がベストプラクティスについて教えてくれるかもしれないと思いました。

いくつかのJavascriptモジュールがあり、それぞれを別々のファイルに入れているとしましょう。

a.js
b.js
c.js
d.js

ソフトウェアをリリースするとき、私はそれらを一緒に結合し、それらを縮小します：

//pseudo command:
cat a.js b.js c.js d.js | minify > all.js

次に、次のようにhtmlファイルにall.jsへの参照を含めます。

<script src="all.js"></script>

ここまでは順調ですね。問題は、ソフトウェアを開発するときに、ファイルが縮小されておらず、結合されていないものとして表示したいということです。1つの解決策は、プロセスから縮小を排除し、次のようにすることです。

//pseudo command:
cat a.js b.js c.js d.js > all.js

<script>タグに含めます。これは機能しますが、ファイルを個別に含めたいと思います。だから私は私のhtmlファイルでこれをしなければなりません：

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>

これは意図したとおりに機能しますが、コードをリリースするときに、すべてのhtmlファイルを調べて、これらの4つの<script>タグを置き換える必要<script src="all.js"></script>があります。これは、多くのhtmlファイルがあり、デバッグ/リリースサイクルが定期的に行われるため、プロジェクトにとっては大変な作業です。 。

1つの解決策は、すべてのファイルにスクリプトタグを付けることです。

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
<script src="all.js"></script>

ただし、これにより、実行時に4つの誤った要求が発生します。（リリース時にはall.jsのみが利用可能であるため）。

この問題をどのように解決しますか？

4

4 に答える 4

2

headjsのようなjavascriptローダーを使用してファイルを動的に提供してみませんか？

次に、本番環境に入るときは、headJs呼び出しを変更し、縮小されたjsファイルのみを含める必要があります。

于 2012-10-16T07:26:32.623 に答える
1

ASP.NETを使用しているので、次の方法で問題を解決します。

Default.aspx：

<%
if (ConfigurationManager.AppSettings["IsDebug"] == "true")
{
%>
<script src="Scripts/Application/Core/Constants.js" type="text/javascript"></script>
...
<script src="Scripts/Application/Core/Application.js" type="text/javascript"></script>
<%
} else {
%>
<script src="Scripts/compressed.js" type="text/javascript"></script>
<%
}
%>

Web.config：

<configuration>
  <appSettings>
    <add key="IsDebug" value="true"/>
  </appSettings>
</configuration>

そして、私はGoogleClosureCompilerを使用してすべてのJSを1つのファイルに結合しています。

したがって、顧客にエラーが発生した場合は、コンソール出力（使用している場合）に変更IsDebugして確認し、エラーの原因を確認するように顧客に依頼できます。true

于 2012-10-16T07:38:09.160 に答える
1

<script src="xxx.js">を、のようなサーバー側関数に置き換えます<% Require("xxx.js"); %>。

この関数は、このファイルの通常のスクリプト参照をレンダリングするか、縮小モードの場合に、ファイルが属する集約グループを特定するように構成されています（「all」と呼ばれるグループは1つだけですが、このアプローチは複数の集約をサポートします）グループ）、他のRequire()呼び出しでまだ必要とされていない場合は、その集約ファイルのスクリプト参照を追加します。

これにより、開発中に集約（+縮小）モードと非集約モードを自由に切り替えることができます。リリースされたバージョンはデフォルトで集約モードを使用するように構成されていますが、開発バージョンは元のモードを使用します。

擬似コード：

string RequireScript(string filename) 
{
    if (!IsAggregated)
    {
        return "<script src='$(filename)'>";
    }
    else 
    {
        var group = FindAggregationGroupFor(filename); 
        if (group in _requiredGroups) return "";

        _requiredGroups.Add(group);
        return "<script src='/aggregated/$(group).js'>";
    }
}
于 2012-10-16T07:38:45.270 に答える
0

また、基本的なテンプレートシステムとして、ヘッダーファイルを1つだけ記述し、それをWebサイトのすべてのページに動的にインクルードすることもできます。

したがって、すべてのページを編集するには、1つのファイルを変更するだけで済みます。

次に例を示します：http ：//www.davidjrush.com/blog/2009/08/php-header-and-footer-templates/

于 2012-10-16T07:40:36.943 に答える