ホームページ ウェブフロントエンド jsチュートリアル UglifyJS を使用してノードの下で JS ファイルを圧縮およびマージする方法

UglifyJS を使用してノードの下で JS ファイルを圧縮およびマージする方法

Mar 09, 2018 am 09:36 AM
javascript node

この記事では、UglifyJS を使用してノードの下で JS ファイルを圧縮およびマージする方法を主に説明します。UglifyJS の主な機能は、JS の圧縮とマージです。

インストール:

<span style="font-size:18px;color:#006600;">npm install uglify-js -g</span>
ログイン後にコピー

どこでも使用できるように、uglifyjs をグローバル変数としてインストールします。

<span style="color:#006600;">下面是shell命令的中文解释:
* source-map [string],生成source map文件。
* –source-map-root [string], 指定生成source map的源文件位置。
* –source-map-url [string], 指定source map的网站访问地址。
* –source-map-include-sources,设置源文件被包含到source map中。
* –in-source-map,自定义source map,用于其他工具生成的source map。
* –screw-ie8, 用于生成完全兼容IE6-8的代码。
* –expr, 解析一个表达式或JSON。
* -p, –prefix [string], 跳过原始文件名的前缀部分,用于指定源文件、source map和输出文件的相对路径。
* -o, –output [string], 输出到文件。
* -b, –beautify [string], 输出带格式化的文件。
* -m, –mangle [string], 输出变量名替换后的文件。
* -r, –reserved [string], 保留变量名,排除mangle过程。
* -c, –compress [string], 输出压缩后的文件。
* -d, –define [string], 全局定义。
* -e, –enclose [string], 把所有代码合并到一个函数中,并提供一个可配置的参数列表。
* –comments [string], 增加注释参数,如@license、@preserve。
* –preamble [string], 增加注释描述。
* –stats, 显示运行状态。
* –acorn, 用Acorn做解析。
* –spidermonkey, 解析SpiderMonkey格式的文件,如JSON。
* –self, 把UglifyJS2做为依赖库一起打包。
* –wrap, 把所有代码合并到一个函数中。
* –export-all, 和–wrap一起使用,自动输出到全局环境。
* –lint, 显示环境的异常信息。
* -v, –verbose, 打印运行日志详细。
* -V, –version, 打印版本号。
* –noerr, 忽略错误命令行参数。</span>
ログイン後にコピー

# UglifyJS2の使い方

> UglifyJS2の使い方は2通りあります

1. API呼び出し

2つのJS start.jsをマージして圧縮してテストします.js ファイル

~> uglifyjs start.js test.js -o new.min.js --source-map new.min.js.map

API 呼び出し:

var fs = require('fs');
var uglifyjs = require("uglify-js");
var result = uglifyjs.minify("../test.js",{
 mangle:false
});
ログイン後にコピー

基本的なコア メソッド minify 上、下このメソッドだけを見てください

これは合計 2 つのパラメータを持つ非常にスマートなメソッドです

最初のパラメータ*

最初のパラメータは文字列、パス、またはパス配列です。

1.

つまり、私たちが書いた JavaScript コードは文字列パラメータパラメータ関数として直接使用できますが、関数にそれを伝えるための 2 番目のパラメータが必要です。これは JavaScript ソースコード文字列です

var result = uglifyjs.minify("var fun=function(){ alert('itKingOne博客');};",{
 mangle:false,
 fromString:true,
});
ログイン後にコピー

上記の最初のパラメータが渡されますJavaScript ソース コードに、パラメータの 2 番目の formString: true を追加すると、前のパラメータが圧縮する必要がある JavaScript ソース コードであることが minify 関数に伝えられます

文字列パス

これは関数でサポートされているメソッドです。デフォルトでは、圧縮された JavaScript ファイルのパスを 2 つのパラメータとして直接指定することもできます。

var result = uglifyjs.minify("../test.js");
ログイン後にコピー

1 つの場合、親ディレクトリ内の test.js が圧縮されます。パラメータはデフォルトで使用され、ファイルパスを表します

配列は複数のパスを指定します

は1つのパラメータを持つことができますが、このパラメータは配列['Path 1', 'Path 2', 'Path 3']と同様です。この結果、上記のパス内のすべての JavaScript が圧縮されて結果オブジェクトに返されます。結果の戻り値については後で説明します。

var result = uglifyjs.minify([ "../test.js", "../mian.js"]);
ログイン後にコピー

第 2 パラメータ*

パラメータの説明

romString。属性 (デフォルトは false) 最初のパラメータの文字列が JavaScript ソースコードであることを指定します

mangle 属性のデフォルトは true、 false に指定すると、難読化された圧縮が実行されないことを示します

width 属性と max-line-len 属性が続きます命令では、ここでは圧縮ファイルの長さを参照する必要があります

outSourceMap 属性は、関数の戻り値を指定するために使用されます。オブジェクトファイル属性に変換された後の result.map 文字列

sourceRoot 属性の値は、関数の戻り値を指定するために使用されますマップ文字列がオブジェクトに変換された後のsourceRoot属性の値。

戻り値の結果は、圧縮されたスクリプトに対応します

{"code":"这里是压缩后的 javascript 脚本","map":null}
ログイン後にコピー

関連する推奨事項:

JSマージjson オブジェクト インスタンス


php js のマージ例 request_PHP チュートリアル

php js のマージ例 request_PHP

以上がUglifyJS を使用してノードの下で JS ファイルを圧縮およびマージする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? PIノードティーチング:PIノードとは何ですか? PIノードをインストールしてセットアップする方法は? Mar 05, 2025 pm 05:57 PM

ピン張りのノードの詳細な説明とインストールガイドこの記事では、ピネットワークのエコシステムを詳細に紹介します - PIノードは、ピン系生態系における重要な役割であり、設置と構成の完全な手順を提供します。 Pinetworkブロックチェーンテストネットワークの発売後、PIノードは多くの先駆者の重要な部分になり、テストに積極的に参加し、今後のメインネットワークリリースの準備をしています。まだピン張りのものがわからない場合は、ピコインとは何かを参照してください。リストの価格はいくらですか? PIの使用、マイニング、セキュリティ分析。パインワークとは何ですか?ピン競技プロジェクトは2019年に開始され、独占的な暗号通貨PIコインを所有しています。このプロジェクトは、誰もが参加できるものを作成することを目指しています

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

See all articles