Maison > interface Web > js tutoriel > Comment compresser et fusionner des fichiers JS dans le nœud

Comment compresser et fusionner des fichiers JS dans le nœud

php中世界最好的语言
Libérer: 2018-03-28 15:22:05
original
1873 Les gens l'ont consulté

Cette fois, je vais vous montrer comment compresser et fusionner des fichiers JS dans node. Quelles sont les précautions pour compresser et fusionner des fichiers JS dans node. Voici un cas pratique, jetons un oeil.

La dernière version d'UglifyJS est désormais la 2.8.13. Sa fonction principale est la compression et la fusion JS. Accédez directement au tutoriel ci-dessous :

Installation : .

<span style="font-size:18px;color:#006600;">npm install uglify-js -g</span>
Copier après la connexion

Installez uglifyjs en tant que variable globale afin que nous puissions l'utiliser n'importe où.

<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>
Copier après la connexion

# Comment utiliser UglifyJS2

> Il existe 2 façons d'utiliser UglifyJS2

1. appel de commande

2. appels d'API

commande shell :

Fusionner et compresser les deux fichiers JS start.js et test.js

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

Appel API :

var fs = require('fs');
var uglifyjs = require("uglify-js");
var result = uglifyjs.minify("../test.js",{
 mangle:false
});
Copier après la connexion

Minify est une méthode de base de base ci-dessus. Examinons cette méthode séparément

Il s'agit d'une méthode très intelligente avec un total de 2 paramètres

Le premier paramètre*.

Le premier paramètre peut être une chaîne, un chemin ou un tableau de chemins

1 Le paramètre de chaîne

c'est ce que nous écrivons Le code

javascript peut être directement utilisé comme fonction de paramètre de paramètre de chaîne, mais un deuxième paramètre est nécessaire pour indiquer à la fonction, qui est le premier paramètre au-dessus de la chaîne source javascript

var result = uglifyjs.minify("var fun=function(){ alert('itKingOne博客');};",{
 mangle:false,
 fromString:true,
});
Copier après la connexion
Le code source javascript est transmis. Le formString: true dans le deuxième paramètre indique à la fonction minify que le paramètre précédent est le code source javascript qui doit être compressé

String. path

Il s'agit d'une méthode prise en charge par la fonction par défaut. Vous pouvez directement donner un seul paramètre au chemin d'un fichier JavaScript qui doit être compressé. Bien sûr, vous pouvez également utiliser deux paramètres. 🎜>

La fonction ci-dessus s'exécutera. Compresser test.js dans mon répertoire parent Lorsqu'un paramètre est utilisé par défaut, il indique le chemin du fichier
var result = uglifyjs.minify("../test.js");
Copier après la connexion

Le tableau spécifie plusieurs chemins.

peut avoir un paramètre, mais celui-ci Le paramètre est un tableau ['Path 1', 'Path 2', 'Path 3']. le chemin ci-dessus est compressé et renvoyé à l'objet résultat. Nous parlerons de la valeur de retour du résultat séparément plus tard.

Deuxième paramètre*
var result = uglifyjs.minify([ "../test.js", "../mian.js"]);
Copier après la connexion

Description du paramètre

L'attribut romString (false par défaut) spécifie que la chaîne dans le premier paramètre est du code source javascript

L'attribut mangle est par défaut vrai lorsqu'il est spécifié comme faux, cela signifie qu'une compression obscurcie ne sera pas effectuée ;

Les attributs width et max-line-len suivent les instructions, ici doivent faire référence à la longueur du fichier compressé

L'attribut outSourceMap est utilisé pour spécifier la valeur de l'attribut file après la fonction valeur de retour la chaîne result.map est convertie en Object

l'attribut sourceRoot est utilisé pour spécifier la valeur de retour de la fonction result.map string après avoir été convertie en Object sourceRoot La valeur de l'attribut

Valeur de retour result *

Le résultat de la valeur de retour est un objet. L'attribut code correspond au script compressé

Je crois que vous avez lu le cas dans cet article Vous maîtrisez la méthode Pour en savoir plus. informations passionnantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !
{"code":"这里是压缩后的 javascript 脚本","map":null}
Copier après la connexion

Lecture recommandée :

Comment modifier la valeur dans les données de demande de vue


Comment vue et vue-i18n implémentent l'arrière-plan données Commutation multilingue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal