집 > 기사 > 웹 프론트엔드 > UglifyJS를 사용하여 노드 아래 JS 파일을 압축하고 병합하는 방법

UglifyJS를 사용하여 노드 아래 JS 파일을 압축하고 병합하는 방법

亚连원래의: 2018-05-31 17:47:131575검색

아래에서는 UglifyJS를 사용하여 노드 아래에서 JS 파일을 압축하고 병합하는 방법을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

UglifyJS의 최신 버전은 이제 2.8.13입니다. 주요 기능은 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

1을 사용하는 방법은 2가지가 있습니다.

병합 및 압축 시작 두 개의 JS 파일 .js 및 test.js

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

API 호출:

var fs = require(&#39;fs&#39;);
var uglifyjs = require("uglify-js");
var result = uglifyjs.minify("../test.js",{
 mangle:false
});

위의 minify 기본 핵심 방법인데, 이 방법을 따로 살펴보겠습니다

총 2개의 매개변수가 있는 매우 똑똑한 방법입니다

첫 번째 매개변수*

첫 번째 매개변수는 String, path, path array;

1. 문자열 매개변수

는 우리가 작성하는 자바스크립트 코드입니다. 문자열 매개변수 함수로 직접 사용할 수 있지만 함수를 알려주는 두 번째 매개변수가 필요합니다. is javascript Source string

var result = uglifyjs.minify("var fun=function(){ alert(&#39;itKingOne博客&#39;);};",{
 mangle:false,
 fromString:true,
});

위의 첫 번째 매개변수는 자바스크립트 소스 코드에 전달되며, 두 번째 매개변수 formString: true는 minify 함수에 이전 매개변수가 압축되어야 하는 자바스크립트 소스 코드임을 알려줍니다.

문자 문자열 경로

함수에서 기본적으로 지원하는 방식입니다. 압축해야 하는 JavaScript 파일 경로에 단일 매개변수를 직접 부여할 수 있습니다. 물론 두 개의 매개변수를 사용할 수도 있습니다.

var result = uglifyjs.minify("../test.js");

위 함수가 실행되면 상위 디렉토리의 test.js를 압축하겠습니다. 기본적으로 하나의 매개변수가 사용되면 파일 경로를 나타냅니다.

배열은 여러 경로를 지정합니다

하나를 가질 수 있습니다. 매개변수이지만 이 매개변수는 배열 ['path 1', 'Path 2', 'Path 3']입니다. 이와 유사하게 결과는 위 경로의 모든 자바스크립트가 압축되어 결과 객체로 반환된다는 것입니다. 결과 반환 값에 대해서는 따로 다루겠습니다.

var result = uglifyjs.minify([ "../test.js", "../mian.js"]);

두 번째 매개변수*

매개변수 설명

romString 속성 (기본값 false) 첫 번째 매개변수의 문자열이 자바스크립트 소스 코드임을 지정합니다

mangle 속성의 기본값은 true이며 false로 지정하면 난독화 및 압축이 수행되지 않는다는 의미입니다width 및 max- 설명에 따르면 line-len 속성은 압축된 파일의 길이를 참조해야 합니다. 함수 반환 값을 지정하는 데 사용됩니다. map 문자열이 Object로 변환된 후의 file 속성 값은 result.map 문자열이 변환된 후 sourceRoot 속성의 값을 지정하는 데 사용됩니다. into Object

반환값 결과 *

반환값 결과는 객체입니다. 코드 속성은 압축된 스크립트

{"code":"这里是压缩后的 javascript 脚本","map":null}

위 내용은 모두를 위해 컴파일한 내용입니다. 네, 모두에게 도움이 되길 바랍니다. 미래에.

UglifyJS를 사용하여 노드 아래 JS 파일을 압축하고 병합하는 방법

관련 기사