JavaScript 툴체인에는 무엇이 있습니까?

JavaScript 툴체인에는 무엇이 있습니까?

---

웹에서 실행하기 위해 JavaScript로 정교한 응용 프로그램을 작성하려고합니다. 이전에 DOM을 직접 사용하고 jQuery를 약간 사용하여 JavaScript로 약간의 일회용 코드를 작성했습니다. 그러나 브라우저에서 실행할 본격적인 애플리케이션을 작성하려는 것은 이번이 처음입니다.

그래서 사람들이 JavaScript로 진지한 개발을하기 위해 선호하는 툴체인이 무엇인지 궁금합니다. 특히, 구성 요소를 선택한 이유와 구성 요소가 워크 플로에 어떻게 결합되는지에 대한 몇 가지 정보와 함께 다음에 관심이 있습니다.

• 어떤 편집기 및 편집기 플러그인 / 모드 / 스크립트를 사용하십니까? 저는 일반적으로 Emacs 사용자이며 js2.el현재 사용 하고 있지만 다른 설정에 대해 듣고 싶습니다.
• IDE (Aptana, Dashcode 등)를 사용하십니까?
• 어떤 JavaScript 라이브러리 또는 프레임 워크를 사용하십니까?
• JavaScript로 컴파일되는 언어 (GWT, haxe, Objective-J)를 사용하십니까?
• 어떤 단위 테스트 프레임 워크를 사용하십니까? 어떻게 호출합니까? 편집기 / IDE, 명령 줄, 웹 페이지의 브라우저, JavaScript 디버거에서 호출 할 수 있습니까?
• 어떤 자동화 된 사용자 인터페이스 테스트 도구를 사용하십니까 (예 : Selenium, Watir, Sahi)? 다시, 이것들은 어떻게 호출 될 수 있습니까? (명령 줄에서 단위 테스트 및 인터페이스 테스트를 호출 할 수 있다는 것은 빌드 봇을 실행하는 데 매우 유용합니다.)
• 다른 코드 품질 도구 (JSlint, 코드 커버리지 도구 또는 이와 유사한 도구)를 사용하십니까?
• 디버깅 환경 (Firebug, WebKit inspector 등)에 무엇을 사용하십니까? 편집기 또는 IDE와 통합되어 있습니까?
• 코드를 배포하기 전에 코드에서 어떤 사후 처리를 실행합니까 (난 독자, 축소 기, 모든 종류의 최적화 프로그램)?
• 모듈 종속성을 관리하거나 필요에 따라 코드를 동적으로로드하기위한 도구가 있습니까? 내가 작성중인 애플리케이션은 많은 양의 코드로 작업 할 것이며로드 시간을 줄이려고하므로 필요한 모듈을 추적하거나 요청시 코드를로드하는 도구가 도움이 될 것입니다.
• 도구 체인에 다른 필수 도구가 있습니까 (브라우저 기반 애플리케이션을위한 JavaScript 개발에만 해당됩니다. 이미 완벽하게 우수한 버전 제어 시스템, 버그 추적기 등).

저는 여기서 "사용할 수있는 많은 것"(사용 가능한 많은 도구에 대해 알고 있음) 목록에 관심이 적고 실제로 실제로 사용하는 스택과이 모든 것이 어떻게 적합한 지 더 많이 알고 있습니다. 함께. 나는 이것을 주로 클라이언트 측 응용 프로그램으로 개발하고 서버가 인증에 사용되고 데이터를 저장하고 검색하기를 희망하므로 클라이언트에 필수적인 경우가 아니면 사용하는 서버 측 프레임 워크에 관심이 없습니다. 어떤 식 으로든 사이드 코드.

edit : 특히 단위 및 사용자 인터페이스 테스트 프레임 워크와이를 자동화하는 방법에 관심이 있습니다. 명령 줄에서 하나의 "make test"또는 "rake test"작업을 실행하여 프로젝트에 대한 모든 테스트를 실행하고 테스트의 성공 또는 실패에 따라 상태를 반환하는 것을 선호합니다. 이를 통해 빌드 봇과 훨씬 쉽게 통합 할 수 있습니다. 또한 브라우저에 의존하지 않는 코드에 대해 브라우저 외부 (Rhino, spidermonkey, v8 등)에서 실행할 수있는 단위 테스트를 작성하는 사람이 있다면 관심이 있습니다. 테스트.

---

어떤 편집기 및 편집기 플러그인 / 모드 / 스크립트를 사용하십니까? 저는 일반적으로 Emacs 사용자이며 현재 js2.el을 사용하고 있지만 다른 설정에 대해 듣고 싶습니다.

저는 일반적으로 Textmate를 사용 합니다 ( JavaScript , jQuery 및 Prototype 번들 포함). HTML, CSS 및 JavaScript 파일 사이를 빠르게 이동하는 무거운 프런트 엔드 개발을 수행 할 때 vim의 분할 패널보기를 선택합니다. 그렇게 할 때 기분에 따라 macvim 또는 Terminal + Visor를 사용 합니다. 분명히 저는 Mac 사용자입니다.

IDE (Aptana, Dashcode 등)를 사용하십니까?

아니요. Coda 를 사용 했지만 텍스트 편집기 기능이 많이 필요합니다. 나는 또한 Espresso를 가지고 놀았 는데, 이것은 흥미롭지 만 ...

어떤 JavaScript 라이브러리 또는 프레임 워크를 사용하십니까?

프로젝트의 필요에 따라 jQuery 와 Prototype을 모두 사용 합니다. 각 프레임 워크의 강점을 설명하기 위해 jQuery를 DOM 조작 프레임 워크로 , Prototype a 스크립팅 프레임 워크 를 언급하고 싶습니다 . 따라서 저는 마크 업에 초점을 맞춘 프로젝트에 jQuery를 사용하고 더 많이 스크립팅 된 애플리케이션 유형 프로젝트에 프로토 타입을 사용하는 경향이 있습니다.

JavaScript로 컴파일되는 언어 (GWT, haxe, Objective-J)를 사용하십니까?

절대 아닙니다-저는 그러한 프레임 워크에 대한 철학적 불만이 있습니다. 서버 측 코드와 달리 프런트 엔드 코드는 제어 할 수없는 환경의 사용자 브라우저에서 실행됩니다. 따라서 가능한 최고의 코드 를 생성하는 것이 JavaScript 개발자의 책임이라고 생각 합니다 . 차선의 코드는 성능에 영향을 미칠 수 있으며 Objective-J와 같은 언어로 컴파일 된 JavaScript는 강력한 JavaScript 개발자가 생성 한 코드만큼 엄격하지 않습니다.

어떤 단위 테스트 프레임 워크를 사용하십니까? 어떻게 호출합니까? 편집기 / IDE, 명령 줄, 웹 페이지의 브라우저, JavaScript 디버거에서 호출 할 수 있습니까?

저는 jQuery 단위 테스트 프레임 워크 인 QUnit 의 열렬한 팬입니다 . Dojo의 DOH 단위 테스트 도 좋습니다.

단위 테스트를위한 멋진 Firebug 확장 프로그램 인 FireUnit을 놓치지 마세요 .

Razor를 참조하십시오 .

어떤 자동화 된 사용자 인터페이스 테스트 도구를 사용하십니까 (예 : Selenium, Watir, Sahi)? 다시, 이것들은 어떻게 호출 될 수 있습니까? (명령 줄에서 단위 테스트 및 인터페이스 테스트를 호출 할 수 있다는 것은 빌드 봇을 실행하는 데 매우 유용합니다.)

필요한 경우 Selenium을 사용 하지만 이것은 드뭅니다.

다른 코드 품질 도구 (JSlint, 코드 커버리지 도구 또는 이와 유사한 도구)를 사용하십니까?

나는 JSLint를 사용하고 사랑 합니다.

Firebug는 멋진 코드 커버리지 확장 기능 을 가지고 있으며 HRCov 는 최고의 제품으로 널리 간주됩니다. 대부분의 일상적인 JavaScript 작업에서 코드 커버리지를 많이 사용하지 않습니다.

디버깅 환경 (Firebug, WebKit inspector 등)에 무엇을 사용하십니까? 편집기 또는 IDE와 통합되어 있습니까?

제가 아는 한 Firebug는 JavaScript 개발을위한 킬러 앱입니다. 몇 가지 유용한 디버깅 기능 :

• 다양한 툴팁
• 중단 점 및 조건부 중단 점
• 성능 프로파일 러
• 매우 멋진 콘솔 API
• 표정보기
• 스택 추적
• Jiffy , FireCookie 및 FireQuery 와 같은 유용한 플러그인 .

WebKit Inspector는 DragonFly 와 마찬가지로 훌륭 하며 Debug Bar 는 IE 버그를 추적하는 데 유용하지만 FireBug는 저에게 적합합니다.

코드를 배포하기 전에 코드에서 어떤 사후 처리를 실행합니까 (난 독자, 축소 기, 모든 종류의 최적화 프로그램)?

저는 의도적으로 후 처리 도구를 사용하지 않습니다. JavaScript의 가장 큰 장점 중 하나는 개방성이며, 초보 JavaScript 개발자가 제 작업에서 배우는 것을 더 어렵게 만들고 싶지 않습니다. 난독 화 된 JavaScript를 재구성하는 것은 매우 간단합니다.

대역폭을 절약하기 위해 JavaScript를 축소해야하는 경우는 단 하나뿐입니다. 이 경우 Doug Crockford의 우수한 JSMin 을 실행 하기 위해 SVN post-commit hook 을 설정했습니다 .

도구 체인에 다른 필수 도구가 있습니까 (브라우저 기반 애플리케이션을위한 JavaScript 개발에만 해당됩니다. 이미 완벽하게 우수한 버전 제어 시스템, 버그 추적기 등).

• alert()함수)
• 또한 멋진 JSON 유효성 검사기 가 유용합니다.
• 시각적 이벤트 는 이벤트 디버깅에 유용합니다.
• jsfuzzer , 퍼 징용
• 나는 그것을 사용할 필요가 없지만 Crosscheck 는 내 툴킷에 있습니다.

---

이 질문을 할 당시 구글의 클로저 컴파일러 는 논쟁이 없었습니다.
이것은 다른 많은 것보다 JavaScript를 더 잘 최소화하는 매우 좋은 도구입니다. 페이지 속도 로 실행 하여 기존 웹 사이트를 분석 할 수 있습니다 . 죽은 코드, 참조 등을 감지하는 것과 같은 많은 다른 기능이 내장되어 있습니다.

---

• 편집을위한 IntelliJ IDEA / RubyMine.
• Ruby와 유사하기 때문에 jQuery + Plugins
• JavaScript로 컴파일되는 언어 (GWT, haxe, Objective-J)를 사용하십니까?
• Blue Ridge (Rails 패키지)가있는 JSUnit,하지만 Selenium 테스트에 더 의존
• 쌍 프로그래밍 및 테스트 이상의 코드 품질 도구 없음
• 주로 Firebug로 디버그
• 공간을 줄이기 위해 gzip 압축에 의존
• 작은 모듈 식 JS 파일을 많이 만듭니다.
• 레일을 사용하여 필요에 따라 이러한 파일을 정적으로 결합하고 자동으로 포함합니다. 이것은 사용자 지정 코드이지만 블로그에 게시했습니다. 이를 통해 개발이 성장함에 따라 모듈화 상태를 유지할 수 있습니다.
• 사이트에서 위젯을 관리하기 위해 꽤 많은 jQuery 플러그인을 빌드하십시오.

---

RubyMine을 JavaScript IDE로 사용하기 시작했습니다. 순전히 JavaScript 지원을 위해 꽤 좋습니다. IntelliJ IDEA의 것과 동일합니다.

디버깅을 위해 Firebug는 분명한 필수품이지만 내 의견으로는 최근에 조금 내리막 길을 갔다. 나는 디버거보다 로깅을 더 많이 사용하는 경향이 있으므로 log4javascript가 매우 유용하다고 생각합니다 (하지만 내가 작성했다는 점을 지적해야합니다). 또한 WebKit의 검사기와 IE 8의 디버거를 가끔 사용하고, 이전 버전의 IE에서는 Visual Studio의 디버거를 사용합니다.

코드 품질을 위해 JSLint를 수동으로 사용하고 일부 권장 사항에 동의하지 않기 때문에 가끔 사용합니다. RubyMine / IntelliJ에는 또한 코드를 작성할 때 코드를 분석하고 코드 옆에 경고를 생성하는 수많은 JS "검사"가있어 유용하다고 생각합니다.

저는 최소화되지 않은 개별 스크립트를 포함하는 몇 가지 개발 페이지에서 개발하는 경향이 있으며 빌드를 만들 때 버전 제어에서 내 코드를 확인하고 개별 스크립트를 연결하고 로깅을 제거하는 빌드 스크립트 (내 자신, Ant로 작성)를 실행합니다. 디버깅 호출, 코드 축소 / 압축 (JSMin 또는 YUICompressor 사용), 단위 테스트 실행 내 단위 테스트 스크립트는 내 소유이며 엄청나게 멋진 것은 아닙니다.

합리적으로 잘 작동하지만 완벽하지는 않습니다.

---

아직 Javascript로 큰 내용을 작성하지 않았지만 (최신 프로젝트에서 약 3000 줄) JSLint를 수행하고 배포 / 빌드 스크립트에 필요한 모든 라이브러리와 함께 축소 / 결합합니다. 내 빌드 스크립트는 또한 HTML을 스크립트 및 라이브러리를 직접 가져 오는 것에서 프로덕션 압축 코드를 가져 오는 것으로 변경합니다. 이렇게하면 필수적인 개발 변경 사항을 확인하기 위해 빌드 스크립트를 실행할 필요가 없습니다.

YUI Compressor is pretty slow, especially since it starts up the JVM to run, but it gets the job done. Some kind of minification in your deploy script is essential to get rid of all the comments, and if you avoid global variables you'll get a meaningful amount of identifier name length compression too, though not much benefit after gzip. Possibly you'll want another step to remove console.debug lines and other debugging code.

For debugging, FireBug. I'm sure the webkit debugger is fine too.

For developing, vim with an improved js indent script and ctags with some js modifications. I'm not sure what advantages a real IDE has but I'm sure there are some. Vim doesn't do syntax highlighting of HTML inside javascript strings by default, but apparently it can be configured to.

JSLint runs in Rhino easily, but spidermonkey gets done about 3x as fast since it doesn't need to start up the JVM. Crockford doesn't support that arrangement but I managed to get it working somehow.

---

I'm on a slightly different technology stack (asp.net mvc), but here it goes:

• IDE: Visual Studio 2008 + ReSharper, Asp.Net MVC
• Editor: Notepad++ (most of my time is in VS, but Notepad++ has better syntax highlighting for JavaScript)
• Dev Browser: FireFox+Firebug+YSlow+PageSpeed+FireCookie Also add Developer Toolbar
• Other Browsers: IE8, Chrome 3, Safari, Opera (rarely used), and IE6 and IE7 via virtual machines (freely downloadable Virtual PC images from Microsoft).
• Post-Processing: JLint and YUI Compressor. I have a build task do the YUI compressor part.
• JavaScript Framework: JQuery + JQuery UI
• Other stuff: JQuery Validation, JSON2

---

Web Tech has moved along a bit so I thought I'd mention some nice modern tools and frameworks for anyone seeing this question in 2017.

What editor and editor plugins/modes/scripts do you use?

Atom is my text editor of choice and as I'm in the MS ecosystem, Visual Studio 2013 is the IDE I use, though I avoid VS for JavaScript development. I do virtually all of my JavaScript development exclusively with Atom wherever I can though.

I have a fair few plugins which help my work flow.

• atom-beautify which I use to clean up any styling issues I might introduce, it does this on save so makes things easy for me as I save and check-in often.
• atom-easy-jsdoc which allows me to insert jsdoc comments using a hotkey combo, this is great as it lets me automatically generate documentation for code, especially useful for API development.
• atom-ternjs is the package I use for JavaScript code completion, I don't need this often but it is handy to have.
• minimap is a plugin that allows me to see a low detail outline of all the code in a particular document, I find it easier to use than scrollbars. YMMV.
• pigments is a plugin that renders colors when it detects hex colors in CSS behind the text. Useful if you need to adjust and see the result quickly.

Do you use any sort of IDE (Aptana, Dashcode, or the like)?

See above :)

What JavaScript libraries or frameworks do you use?

I tend to use RequireJS for home projects and an in-house module loader at work. I don't generally use libraries and frameworks in my projects, though when I do I'm quite partial to AngularJS (1.x). It all depends on what I'm doing.

Do you use any of the languages that compile to JavaScript (GWT, haxe, Objective-J)?

Nope.

What unit test frameworks do you use? How do you invoke them? Can they be invoked from your editor/IDE, from the command line, from the browser in a web page, from your JavaScript debugger?

I use Node.js with Karma test runner as the test runner (who'da thunk it?), Jasmine as my test Framework and sinonJS as my stubbing/mocking library for test development.

Karma can be configured to watch the file system for changes (or a task runner like grunt with file watching plugins works too) and I have it execute all my tests each time a file is saved. It has the added benefit of being able to run your tests against multiple browsers concurrently. So it'll test JS against IE, Edge, Chrome, Firefox, PhantomJS etc... Which is extremely useful.

I have my js projects setup to run grunt tasks. I typically just execute 'grunt devmode' from a command prompt / terminal and that's it, my tests run. For Continuous Integration on commit I have a separate grunt task that only runs the tests once. For home use I have TravisCI run that task whenever a push occurs.

What other code quality tools do you use (JSlint, code coverage tools, or anything of the sort)?

I use JSHint as it's less picky than JSLint. For code coverage I use Istanbul which incidentally runs whenever my unit tests run, which is super useful.

What do you use for your debugging environment (Firebug, WebKit inspector, etc)? Does it have any integration with your editor or IDE?

I use whichever Web Browser is having problems. If it's server side, e.g. Node, I use node-debugger as I can debug straight from Atom.

What post-processing do you run on your code before deploying it (obfuscators, minifiers, any kind of optimizers)?

I generally don't do this, that said for web projects ideally a minifier and uglifier.

Do you have any sort of tools for managing module dependencies or dynamically loading code as it's needed? The application I'm writing will be working with a large amount of code, and I would like to keep load times down, so tools for tracking what modules are needed or loading code on demand would be helpful.

Yep! I use the RequireJS AMD implementation. I use npm as my package manager of choice, although if I'm using Visual Studio, I'll use nuget.

Are there any other essential tools in your toolchain (which are specific to JavaScript development for browser based applications; I already have a perfectly good version control system, bug tracker, etc)?

Not quite sure I understand the question, but I use Git for home projects as and TFS at work, GitHub as my repo host, TravisCI for continuous integration and Coveralls (code coverage reporter for Git repositories).

---

• Editor: Notepad or any other text editor with syntax highlighting

• IDE: can be Dreamweaver, Aptana, Netbeans - up to your personal preference.

• Javascript Framework: I'm more used to jQuery and I still recommend jQuery.
  you can look into adding some "plugins" to jQuery. some are really cool. like Facebox (http://famspam.com/facebox) - a jQuery Facebook-like popup box which is easy to use. or jQuery Cookie plugin

• Debugging: Firebug (FireCookie, Page Speed, YSlow) - no integration with IDE but is magic on the browser. If you need cross browser debugging, you can go for Firebug Lite.

  You can easily use console.log() to debug instead of alert (especially when you are doing javascript with great amount of callback, timers, AJAX and so on. You don't want an alert statement to break the way it should originally be.

• Post-processing: Packer - http://dean.edwards.name/packer/

---

Google wave is powered by GWT so it seems to be a good option for bigger apps.

---

I use Dashcode to develop Mac Widgets and for that it is "ok" and has a lot of widget orientated features but for everything else, TextMate

---

The only thing I tend to keep around is jQuery for easy DOM manipulation, but that's not necessary. I don't rely on any frameworks or anything else; if I need to write something, I just write it in vim or whatever text editor i have available (because I think IDEs are for people who are lazy or in corporate/enterprise environments). If I need to use a framework, I'll go out and seek one out for whatever purpose I happen to have. But at the end of the day, I just write Javascript. I don't specialize in any frameworks because they all become old news eventually. It's more powerful to just know how the dang language works and be able to work in any context or situation, with or without a framework or a library to hold your hand all the way.

ReferenceURL : https://stackoverflow.com/questions/1480186/what-is-in-your-javascript-toolchain