JavaScript를 최소화 / 압축 해제하는 도구 [닫기]

430

Tidy가 끔찍한 HTML을 정리하는 방법과 유사하게 축소 효과를 되돌릴 수있는 명령 줄 스크립트 및 / 또는 온라인 도구가 있습니까?

(특히 축소 된 JavaScript 파일을 최소화하려고하므로 변수 이름 바꾸기가 여전히 문제가 될 수 있습니다.)

javascript  code-formatting  minify  compression  unminify 
— 앤디 포드
소스
4
잘 모르는 사람들을 위해 축소는 내부 변수 이름을 단일 문자로 변경하고 코드 주석을 제거합니다. 이러한 변경 사항을 취소하면 자동화 할 수 없습니다.
— Vivian River
@DanielAllenLangdon 좋은 지적입니다. 더 이상 축소가 변수 이름을 변경하지 않는다는 것을 암시하지 않도록 질문을 편집했습니다.
— Andy Ford
12
FWIW ... 방금 JS NICE jsnice.org를
— Andy Ford
marcusjenkins.com/linux/… 는 나를 위해 잘 작동했습니다.
— ychaouche
1
@DanielAllenLangdon의 경우 : jsnice.org는 30k angularjs 코드를 최소화하고 난독 화 할 수 있습니다.
— Green

답변:

504

당신은 이것을 사용할 수 있습니다 : http://jsbeautifier.org/ 그러나 그것은 당신이 사용하는 축소 방법에 달려 있습니다.

편집 : 실제로 "packed"스크립트의 압축을 풀 수 있습니다 (Dean Edward의 패커로 압축 : http://dean.edwards.name/packer/ )

— 파비앙 메나 게르
소스
2
+1-이전에이 방법을 사용해 왔으며 jsbeautifier.org는 훌륭한 서비스입니다.
— Dan Lew 2016 년
감사. 이것이 바로 내가 찾던 것입니다.
— Andy Ford
5
: 아니, 나는베이스 (62) 말했다 dean.edwards.name/packer 및 en.wikipedia.org/wiki/Base_62
— 파비앙 MENAGER
4
"변수 이름을 변경"하고 코드를 손상시키지 않는 JS 구문을 여전히 알고있는 도구와 같은 것이 있습니까?
— Jorge Vargas
3
내가 할 수 있다면이 10 번 위로 올라갈 것입니다. 그냥 낭비한 날에서 저를 구 했어요!
— benlumley
154

Chrome 개발자 도구에는이 기능이 내장되어 있습니다. F12를 누르는 방법 중 하나 인 개발자 도구를 불러 오십시오. 소스 탭에서 왼쪽 하단 막대에는 아이콘 세트가 있습니다. "{}"아이콘은 "예쁜 인쇄"이며 요청시이 변환을 수행합니다.

업데이트 : IE9 "F12 개발자 도구"의 도구 탭 아래 스크립트 탭에 "JavaScript 형식"기능이 있습니다. ( F12의 팁 # 4 참조 최고의 웹 디버깅 비밀 유지 )

여기에 이미지 설명을 입력하십시오

— 존 애덤스
소스
1
내가 축소하지 않으려는 특정 .js의 경우이 방법이 가장 효과적이었습니다.
— igneosaur
1
이제 스크립트 탭이 아닌 "소스"탭에 있습니다.
— mhenry1384
@ mhenry1384 : 예, Chrome에서 탭 이름을 바꿨습니다. 이에 따라 답변을 업데이트했습니다.
— Jon Adams
예!! (우리의 응용 프로그램에는 내가 알고있는 js에 대한 디버그 / 개발 모드가 없습니다-고맙게도 변수 이름을 줄이거 나 변환하지 않습니다.)
— Steven Lu
2
헤즈 업 : Chrome은 때때로 자바 스크립트 코드를 엉망으로 만듭니다. 예를 들어, 구문 오류 인 if (a) /regex/.match(foo);것처럼 꽤 인쇄됩니다 if (a)\n / /regex/ .\nmatch(foo);.
— amphetamachine
56

알았다! JSBeautifier 는 정확하게이 작업을 수행하며 자동 서식 옵션도 있습니다.

— 플래시
소스
5
google-then-stackoverflow 대신 stackoverflow-then-google? :))))
— dfa
나는 "javascript formatter online"에 대한 구글을했다
— cgp
1
이 FireFox 플러그인은 JSBeautifier를 사용하여 자바 스크립트를 최소화하지 않으므로 FireBug의 js 디버거에서 줄에 중단 점을 설정할 수 있습니다! : addons.mozilla.org/en-US/firefox/addon/javascript-deminifier
— BT
14

Firefox, SpiderMonkey 및 Rhino에서는 모든 코드를 익명 함수로 래핑하고 해당 toSource메소드를 호출 하여 멋진 형식의 함수 소스를 제공 할 수 있습니다.

toSource 또한 주석을 제거합니다.

예 : :

(function () { /* Say hello. */ var x = 'Hello!'; print(x); }).toSource()

문자열로 변환됩니다 :

function () {
    var x = "Hello!";
    print(x);
}

추신 : "온라인 도구"는 아니지만 일반적인 미용 기술에 대한 모든 질문은 이것과 중복됩니다.

— 카트 스푸
소스
흥미 롭군 2.5 년 전에 질문을 했으므로 제목을 수정하기에는 너무 늦었다 고 생각하지만 온라인 및 오프라인 옵션을 모두보고 싶습니다. chiing in 주셔서 감사합니다. +1
— Andy Ford
10

Mac 및 TextMate를 사용하는 경우 Javascript를 포맷하는 쉬운 방법은 다음과 같습니다.

  1. Textmate로 파일을여십시오.
  2. > 번들> JavaScript> 문서 형식 변경을 클릭하십시오.
  3. 맥주를 부수십시오.
— 결석
소스
2
맥주 : 현재 제공되는
— dgilperez
6

대부분의 IDE는 자동 서식 기능도 제공합니다. 예를 들어 NetBeans에서 CTRL + K를 누르면 됩니다.

— gou1
소스
5

대안으로 (지금까지 jsbeautifier.org에 대해 알지 못했기 때문에) Dean Edward 's Packer에서 디코딩 버튼을 다시 활성화하는 북마크를 사용했습니다.

여기 에서 지침과 북마크를 찾았습니다 .

여기에 북마크가 있습니다 (사이트가 다운 된 경우).

javascript:for%20(i=0;i<document.forms.length;++i)%20{for(j=0;j<document.forms[i].elements.length;++j){document.forms[i].elements[j].removeAttribute(%22readonly%22);document.forms[i].elements[j].removeAttribute(%22disabled%22);}}
— 모티
소스
5

유사 스톤 의 대답하지만, Windows 용 / .NET 개발자 :

Visual Studio 및 ReSharper가있는 경우-Javascript 형식화를위한 쉬운 대안은 다음과 같습니다.

  • Visual Studio에서 파일을 엽니 다.
  • ReSharper> 도구> 정리 코드 (Ctrl + E, C)를 클릭하십시오.
  • "기본값 : 코드 포맷"을 선택하고 확인을 클릭하십시오.
  • 맥주를 부수십시오.
— C. 아우 구스토 프로 이에 테
소스
4

JSPretty 는 인터페이스에서 멀지 않은 거리에도 불구하고 자바 스크립트 소스 코드를 사람이 읽을 수 있도록하는 무료 온라인 도구입니다. 원하는 유형의 들여 쓰기를 적용 할 수 있으며 난독 화를 감지 할 수도 있습니다.

— 파 시드
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.