45

通常のJSMin、Packer、YUIソリューションなど、JavaScript コードを縮小するさまざまな方法を検討しています。非常に強力に見える新しいGoogle Closure Compilerに非常に興味があります。

Dean Edwards packerには、3 つのセミコロンで始まるコード行を除外する機能があることに気付きました。これは、デバッグ コードを除外するのに便利です。例えば：

;;;     console.log("Starting process");

コードベースのクリーンアップに時間を費やしており、このようなヒントを追加して、デバッグ コードを簡単に除外したいと考えています。これに備えて、これが最善の解決策なのか、それとも他の手法があるのか​​ を調べたいと思います。

まだ縮小方法を選択していないため、最終的に使用する縮小ツールと互換性のある方法でコードをクリーンアップしたいと考えています。だから私の質問はこれらです：

  1. セミコロンを使用するのは標準的な手法ですか、それとも他の方法はありますか?

  2. この機能を提供するソリューションは Packer だけですか?

  3. 他のソリューションもこの方法で機能するように適応できますか?それとも、これを達成する別の方法がありますか?

  4. 最終的には、Closure Compiler を使い始めることになるでしょう。それに備えて今からやるべきことはありますか？

4

11 に答える 11

64

これがクロージャコンパイラの（究極の）答えです：

/** @const */
var LOG = false;
...
LOG && log('hello world !'); // compiler will remove this line
...

これはでも動作しSIMPLE_OPTIMIZATIONS、 no--define=は必要ありません!

于 2011-05-11T19:45:52.020 に答える
25

Closure Compilerで使用するものは次のとおりです。まず、次のように DEBUG 変数を定義する必要があります。

/** @define {boolean} */
var DEBUG = true;

ドキュメントで読むことができるクロージャーに JS アノテーションを使用しています。

デバッグのみのコードが必要な場合は、次のように if ステートメントでラップするだけです。

if (DEBUG) {
  console.log("Running in DEBUG mode");
}

リリース用にコードをコンパイルするときは、次のコンパイル コマンドを追加します。--define='DEBUG=false'-- debug ステートメント内のコードは、コンパイルされたファイルから完全に除外されます。

于 2010-07-08T14:03:39.477 に答える
6

この場合の良い解決策は、「条件付きコンパイル」をサポートする js-build-toolsかもしれません。

要するに、次のようなコメントを使用できます

// #ifdef debug
var trace = debug.getTracer("easyXDM.Rpc");
trace("constructor");
// #endif

などのプラグマを定義しますdebug。

次に、それを構築するとき（それにはant-taskがあります）

//this file will not have the debug code
<preprocess infile="work/easyXDM.combined.js" outfile="work/easyXDM.js"/>
//this file will        
<preprocess infile="work/easyXDM.combined.js" outfile="work/easyXDM.debug.js" defines="debug"/>
于 2010-05-29T13:06:59.410 に答える
2

古い質問ですが。今日、同じ問題に出くわしましたが、 CompilerOptionsを使用して達成できることがわかりました。

このスレッドをフォローしました。

コードをクライアントに送信する前に、サーバー上で Java からコンパイラを実行します。これは、シンプルモードで機能しました。

private String compressWithClosureCompiler(final String code) {
    final Compiler compiler = new Compiler();
    final CompilerOptions options = new CompilerOptions();
    Logger.getLogger("com.google.javascript.jscomp").setLevel(Level.OFF);
    if (compressRemovesLogging) {
        options.stripNamePrefixes = ImmutableSet.of("logger");
        options.stripNameSuffixes = ImmutableSet.of("debug", "dev", "info", "error",
                "warn", "startClock", "stopClock", "dir");
    }
    CompilationLevel.SIMPLE_OPTIMIZATIONS.setOptionsForCompilationLevel(options);

    final JSSourceFile extern = JSSourceFile.fromCode("externs.js", "");
    final JSSourceFile input = JSSourceFile.fromCode("input.js", code);
    compiler.compile(extern, input, options);
    return compiler.toSource();
}

logger.debug、logger.dev ...などへのすべての呼び出しを削除します

于 2012-03-01T17:01:21.653 に答える
2

Closure Compiler を Advanced モードで使用する場合は、次のようなことができます。

if (DEBUG) console.log = function() {}

次に、コンパイラはすべての console.log 呼び出しを削除します。もちろん、コマンドラインで--define変数が必要です。DEBUG

ただし、これはAdvanced モードのみです。シンプル モードを使用している場合は、ソース ファイルでプリプロセッサを実行する必要があります。

Dojo Toolkit を検討してみませんか? ビルドに基づいてコードのセクションを含める/除外するためのコメントベースのプラグマが組み込まれています。さらに、Advanced モードの Closure Compiler と互換性があります (以下のリンクを参照)。

http://dojo-toolkit.33424.n3.nabble.com/file/n2636749/Using_the_Dojo_Toolkit_with_the_Closure_Compiler.pdf?by-user=t

于 2011-03-10T12:39:35.330 に答える
2

React アプリでこれを使用します。

if (process.env.REACT_APP_STAGE === 'PROD')
  console.log = function no_console() {};

つまり、console.logprod 環境では何も返されません。

于 2019-12-11T22:00:03.317 に答える
2

UglifyJS2を使用している場合は、drop_console引数を使用して console.* 関数を削除できます。

于 2014-02-25T04:28:34.870 に答える
1

私は@marcel-korpelと一緒です。完璧ではありませんが、機能します。縮小前にデバッグ命令を置き換えます。正規表現は多くの場所で機能します。囲まれていない行に注意してください。

/console\.[^;]*/gm

対象:

;;;     console.log("Starting process");
console.log("Starting process");
console.dir("Starting process");;;;;
console.log("Starting "+(1+2)+" processes"); iamok('good');
console.log('Message ' +
    'with new line'
);
console.group("a");
console.groupEnd();
swtich(input){
    case 1 : alert('ok'); break;
    default: console.warn("Fatal error"); break;
}

動作しません:

console.log("instruction without semicolon")
console.log("semicolon in ; string");
于 2015-11-04T21:29:44.763 に答える
0

私は次の自作のものを使用しました：

// Uncomment to enable debug messages
// var debug = true;

function ShowDebugMessage(message) {
    if (debug) {
        alert(message);
    }
}

debugしたがって、に設定されている変数を宣言すると、trueすべてのShowDebugMessage()呼び出しalert()も同様に呼び出されます。ifdefしたがって、コードで使用するだけで、デバッグ出力行の手動コメントなどのインプレース条件は忘れてください。

于 2012-02-19T19:27:14.523 に答える
0

これまで縮小について調べたことはありませんが、この動作は単純な正規表現を使用して実現できます。

s/;;;.*//g

これにより、行内の 3 つのセミコロンの後 (およびセミコロンを含む) がすべて何も置き換えられないため、縮小する前に破棄されます。sed次のように、縮小ツールを実行する前に (または同様のツールを) 実行できます。

sed 's/;;;.*//g' < infile.js > outfile.js

ところで、圧縮されたバージョンと圧縮されたバージョンのどちらが「優れている」か疑問に思っている場合は、この JavaScript 圧縮方法の比較 をお読みください。

于 2010-05-29T12:30:29.713 に答える