바닐라 JavaScript를 사용하여 Atom 패키지를 작성하는 방법

이 기사는 Vildan Softic이 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! Atom은 핵심 해킹 가능한 편집기의 현대적인 것입니다. 이것은 훌륭하지만 커피 스크립트에 유창하지 않은 개발자에게는 문서를 따르기가 어렵습니다. 원자의 생태계를 이해하면 혼란 스러울 수 있습니다. JavaScript에서 Atom 패키지를 작성하는 방법의 모든 측면을 살펴 보겠습니다. 키 테이크 아웃

는 바벨을 활용하여 JavaScript 코드를 전송하여 Atom의 크롬 기반 환경과의 호환성을 보장하여 미래의 적응성을 유지하면서 ES2015 기능의 사용을 향상시킵니다. `package.json` 파일을 사용하여 NPM 모듈과 같은 원자 패키지를 구조화하고, Atom의 생태계와 완벽하게 통합하기 위해 종속성 및 메타 데이터를 정의합니다. `active ()`,`deactivate ()`및`serialize ()`와 같은 필수 패키지 수명주기 방법을 구현하여 기본 JavaScript 파일에서 패키지의 사용주기를 통해 상태와 동작을 관리합니다. Atom의 직렬화 시스템을 사용하여 세션에서 패키지 상태를 유지하여 사용자 데이터 및 설정이 정확하게 보존되고 복원되도록합니다. 사용자 정의 뷰를 만들고 Atom의 API를 사용하여 구성 가능한 설정, 메뉴 및 키 맵을 추가하여 사용자 상호 작용을 향상시켜 패키지가 다목적 및 사용자 친화적입니다. 아톰 이해 Atom은 Github의 전자 프레임 워크로 작성된 Node.js 및 Chromium 기반 애플리케이션입니다. 즉, 기술적으로 데스크탑에서 실행되는 웹 응용 프로그램이라는 것을 의미합니다. Atom의 내부 기능은 작은 코어 패키지로 나뉩니다. 그들은 커뮤니티의 다른 패키지와 같은 방식으로 개발되었습니다. 그것들은 모두 CoffeeScript로 작성되었지만, 평범한 JavaScript로 작성하거나 Babel을 통해 트랜스 파일을 할 수 있습니다.

. Babel을 사용하여 전체 ES2015 지원을 활성화합니다 바벨은 소스-소스 컴파일러입니다. ECMAScript 2015 (이전에 ES6으로 알려진) 코드를 ECMAScript 5 코드로 바꿉니다. 환경은 크롬이기 때문에 이미 지원되는 ES2015 기능이 많이 있습니다. 그러나 항상 구현되는 것을 항상 찾는 대신 Babel을 사용하여 코드를 전환하는 것이 좋습니다. 이후 릴리스에서 ES2015가 Chromium에서 더 잘 지원되는 경우 Babel을 다시 비활성화하고 코드베이스 (거의)를 그대로 유지할 수 있습니다. babel로 변환을 활성화하려면 각 파일에는 '사용 babel'이 필요합니다. ECMAScript 5의 Strict Mode와 유사한 시작의 진술. 이는 성명서를 생략함으로써 어떤 파일을 변환 해야하는지 결정할 수있는 기능을 제공합니다. package.json

는 원자 패키지를 NPM 모듈로 보는 데 도움이됩니다. Node.js에서 실행되는 도구와 API에 동일한 액세스 권한이 있습니다. 따라서 필요한 NPM 의존성을 추가 할 수 있습니다. Package.json도 프로젝트에 대한 모든 메타 데이터를 포함하여 필요합니다. 기본 파일은 다음과 같아야합니다.

중요한 키는 패키지의 기본 진입 점 (index.js/index.coffee 로의 기본값) 및 엔진 - - 패키지가 어떤 버전에 실행되는지에 대한 원자를 알려주는 주요 키가 기본입니다. "WordCount"패키지 문서

(섹션 package.json) . 에 문서화 된 옵션 키 세트도 있습니다. 패키지 소스 코드 모든 패키지 코드는 최상위 디렉토리 LIB/에 속합니다. 구조를 깨끗하게 유지하고 프로젝트를 더 쉽게 스캔 할 수 있으므로이 폴더에 입구 지점을 갖는 것이 좋습니다. <pre class="brush:php;toolbar:false">&lt;span&gt;{ &lt;/span&gt; &lt;span&gt;&quot;name&quot;: &quot;your-package&quot;, &lt;/span&gt; &lt;span&gt;&quot;main&quot;: &quot;./lib/main&quot;, &lt;/span&gt; &lt;span&gt;&quot;version&quot;: &quot;0.1.0&quot;, &lt;/span&gt; &lt;span&gt;&quot;description&quot;: &quot;A short description of your package&quot;, &lt;/span&gt; &lt;span&gt;&quot;keywords&quot;: [ &lt;/span&gt; &lt;span&gt;&quot;awesome&quot; &lt;/span&gt; &lt;span&gt;], &lt;/span&gt; &lt;span&gt;&quot;repository&quot;: &quot;https://github.com/&lt;your-name&gt;/&lt;package&gt;&quot;, &lt;/span&gt; &lt;span&gt;&quot;license&quot;: &quot;MIT&quot;, &lt;/span&gt; &lt;span&gt;&quot;engines&quot;: { &lt;/span&gt; &lt;span&gt;&quot;atom&quot;: &quot;&gt;=1.0.0 &lt;2.0.0&quot; &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;&quot;dependencies&quot;: { &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;} &lt;/span&gt;</pre>. <must> 주 파일은 패키지의 전체 수명주기를 유지하는 싱글 톤 객체 여야합니다. 패키지가 단일보기로만 구성 되더라도이 개체에서 모두 관리됩니다. Entry-Point에는 하나의 active () 메소드가 필요하지만 deactivate () 및 serialize (). <p> <package> 패키지를 활성화 activate () 함수는 유일한 필수 방법입니다. 여기에서 모든 모듈,보기 또는 도우미를 초기화하십시오. 패키지의 이전 직렬화 상태를 포함하는 객체가 전달됩니다. 패키지에서 일련의 아무것도하지 않으면 빈 객체가됩니다. 즉, 직렬화 할 내용에 대한 귀하와 귀하의 패키지 아키텍처에 전적으로 달려 있습니다. <t> deactivating <c> deactivate () 메소드는 선택 사항이지만 중요합니다. 창이 종료되거나 사용자가 설정에서 비활성화 할 때 Atom에 의해 호출됩니다. 사용자가 패키지를 비활성화하고 추가 이벤트/명령을 폐기하지 않으면 여전히 사용할 수 있습니다. Atom이 창을 종료 할 때는 문제가되지 않습니다. 그것은 사건과 명령을 중단 할 것입니다. 그러나 패키지가 파일을 보거나 다른 작업을 수행하는 경우 Deactivate ()에서 해제해야합니다. 이벤트 구독 패키지는 일반적으로 사용자 정의 명령 추가, 변경 듣기 또는 수정 된 파일과 같은 여러 이벤트를 구독합니다. 이것들을 compositedisposable ()의 인스턴스에 묶을 수 있으며,이 방법으로 모두 한 번에 배치 될 수 있습니다. </c></t></package></p>. <h2> <all> 모든 것들을 직렬화하십시오! <is is> 직렬화는 원자 패키지의 강력하지만 선택적인 기능입니다. 직렬화/사막화는 창이 이전 세션에서 셧다운, 새로 고침 또는 복원 될 때 발생합니다. 데이터를 직렬화 해야하는 구성 요소의 수와 수를 정의하는 것은 귀하에게 달려 있습니다. 중요한 것은 JSON을 반환한다는 것입니다. 당신이 견해가 있고 그것을 새로 고칠 수 있기를 원한다면, 직렬화 및 사막화와 호환되도록해야합니다. </is></all> </h2>.<comp>이 매우 기본적인 구성 요소는 객체를 취하며 구성 요소의 내부 데이터로 사용됩니다. 그러면 구성 요소는 데이터와 함께 작업을 수행 할 수 있으며 Serialize () 메소드를 통해 상태를 직렬화 할 수 있습니다. <p> <this>이 모든 것을 유용하게하려면이 구성 요소는 메인 싱글 톤에서 패키지에서 호출되고 직렬화되어야합니다. </this></p> 직렬화하려는 모든 객체는 Serialize () 메소드가 필요합니다. "직렬화 가능한 객체"를 반환하고 등록 된 사막화 이름의 이름을 가진 사형화제 키를 반환해야합니다. Atom에 따르면,“일반적으로 클래스 자체의 이름입니다.” 또한 클래스는 정적 Deserialize () 메소드도 필요합니다. 이 메소드는 객체를 이전 상태에서 진정한 객체로 변환합니다. <pre class="brush:php;toolbar:false">&lt;span&gt;{ &lt;/span&gt; &lt;span&gt;&quot;name&quot;: &quot;your-package&quot;, &lt;/span&gt; &lt;span&gt;&quot;main&quot;: &quot;./lib/main&quot;, &lt;/span&gt; &lt;span&gt;&quot;version&quot;: &quot;0.1.0&quot;, &lt;/span&gt; &lt;span&gt;&quot;description&quot;: &quot;A short description of your package&quot;, &lt;/span&gt; &lt;span&gt;&quot;keywords&quot;: [ &lt;/span&gt; &lt;span&gt;&quot;awesome&quot; &lt;/span&gt; &lt;span&gt;], &lt;/span&gt; &lt;span&gt;&quot;repository&quot;: &quot;https://github.com/&lt;your-name&gt;/&lt;package&gt;&quot;, &lt;/span&gt; &lt;span&gt;&quot;license&quot;: &quot;MIT&quot;, &lt;/span&gt; &lt;span&gt;&quot;engines&quot;: { &lt;/span&gt; &lt;span&gt;&quot;atom&quot;: &quot;&gt;=1.0.0 &lt;2.0.0&quot; &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;&quot;dependencies&quot;: { &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;} &lt;/span&gt;</pre> <make>이 모든 것을 가능하게하려면 Atom.deserializers.add (). <view> PANES 및 VIECHS <is> 창은 원자의 개별 창입니다. "항목"이라고하는 모든 열린 탭이 포함되어 있습니다. 이 창은 Atom.workspace 객체에 저장됩니다. atom.workspace.getActivePane ()을 사용하면 현재 활성 창을 요청합니다. 창 객체에는 DOM 요소가 포함되어 있지 않지만 Atom의 내부 구성 요소의 모든 인스턴스 (예 : 문자 메시지, GutterContainer, NotificationManager). 패키지에 대한 사용자 정의보기를 만드는 데이 창을 이해하는 것이 필수적입니다. <p> <any> views 또는 다른 사용자 정의 UI 요소를 추가하려는 다른 사용자 정의 UI 요소는 JavaScript로 작성해야합니다. Atom은 전적으로 웹 구성 요소로 빌드되지만 그렇게 할 필요는 없습니다. 사용자 정의 모달의 매우 기본적인 예는 다음과 같습니다. </any></p> <pre class="brush:php;toolbar:false">&lt;span&gt;// lib/main.js &lt;/span&gt;&lt;span&gt;'use babel'; &lt;/span&gt; &lt;span&gt;// This is your main singleton. &lt;/span&gt;&lt;span&gt;// The whole state of your package will be stored and managed here. &lt;/span&gt;&lt;span&gt;const YourPackage = { &lt;/span&gt; &lt;span&gt;activate (state) { &lt;/span&gt; &lt;span&gt;// Activates and restores the previous session of your package. &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;deactivate () { &lt;/span&gt; &lt;span&gt;// When the user or Atom itself kills a window, this method is called. &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;serialize () { &lt;/span&gt; &lt;span&gt;// To save the current package's state, this method should return &lt;/span&gt; &lt;span&gt;// an object containing all required data. &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;}; &lt;/span&gt; &lt;span&gt;export default YourPackage; &lt;/span&gt;</pre> <p> <lo> atom.workspace.addmodalpanel () 메소드는 Atom의 작업 공간에 모달 요소를 추가합니다. 창에 사용자 정의보기를 추가하려면 (예 : 설정 페이지의 경우) 좀 더 많은 작업이 필요합니다. <conf conf> 패키지 구성 <uration> 패키지 구성은 JSON 스키마에 설명해야합니다. 설정을 추가하려면 패키지 객체에는 데이터가 포함 된 구성 키가 필요합니다. 또는 구성을 config-schema.json 파일로 이동하여 가져올 수 있습니다. 이것은 구성을 분리하고 아키텍처를 구성합니다 </uration></conf></lo></p> <p> <the> 이렇게하면 패키지 설정 페이지에서 구성이 자동으로 구성됩니다. 모든 지원되는 유형의 목록은 Atom의 API 문서 구성 페이지에서 찾을 수 있습니다. 다른 모든 패키지 구성과 함께 설정 객체는 Atom.config 객체에 저장됩니다. 를 얻고 설정합니다 <and> get () 및 set () 메소드를 사용하여 구성 키를 얻고 설정할 수 있습니다. Atom의 일반 설정 또는 기타 패키지 설정을 얻을 수도 있습니다. 다른 패키지와 상호 작용하려면 서비스를 제공하고 소비해야합니다. </and></the></p> <pre class="brush:php;toolbar:false">&lt;span&gt;{ &lt;/span&gt; &lt;span&gt;&quot;name&quot;: &quot;your-package&quot;, &lt;/span&gt; &lt;span&gt;&quot;main&quot;: &quot;./lib/main&quot;, &lt;/span&gt; &lt;span&gt;&quot;version&quot;: &quot;0.1.0&quot;, &lt;/span&gt; &lt;span&gt;&quot;description&quot;: &quot;A short description of your package&quot;, &lt;/span&gt; &lt;span&gt;&quot;keywords&quot;: [ &lt;/span&gt; &lt;span&gt;&quot;awesome&quot; &lt;/span&gt; &lt;span&gt;], &lt;/span&gt; &lt;span&gt;&quot;repository&quot;: &quot;https://github.com/&lt;your-name&gt;/&lt;package&gt;&quot;, &lt;/span&gt; &lt;span&gt;&quot;license&quot;: &quot;MIT&quot;, &lt;/span&gt; &lt;span&gt;&quot;engines&quot;: { &lt;/span&gt; &lt;span&gt;&quot;atom&quot;: &quot;&gt;=1.0.0 &lt;2.0.0&quot; &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;&quot;dependencies&quot;: { &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;} &lt;/span&gt;</pre> 변경 듣기 <changes> 변경 사항을 듣으려면 변경 사항 구성을 관찰하거나 OnDidChange ()라는 청취자가 키 경로로 가질 수 있습니다. 둘 다 당신이 .dispose ()를 구독 할 수있는 일회용을 반환합니다. <ing> 다시, compositedisposable의 인스턴스에 추가하면 한 번에 여러 이벤트를 처리 할 수 ​​있습니다. <pose> 또는 개별적으로 처분하십시오 : <p> <ing> 메뉴 및 키 맵으로 미세 조정 <ke> 메뉴 및 키 맵은 원자 환경에서 사용자가 패키지의 기능에 액세스 할 수 있도록합니다. 인터페이스의 특정 명령과 연결되어 있습니다. 패키지를 전환 할 수 있거나보기를 열고 사용자 정의 작업이나 다른 작업을 수행하면 사용자가 사용할 수 있어야합니다. <us> 메뉴 추가 <can> 메뉴 정의는 메뉴/ 최상위 디렉토리의 JSON 파일 또는 package.json의 메뉴 키에 저장 될 수 있습니다. 다음 예제는 패키지 메뉴 표시 줄과 편집기의 컨텍스트 메뉴에 명령을 추가합니다. 편집기 내부를 마우스 오른쪽 버튼으로 클릭하면 컨텍스트 메뉴가 나타납니다. </can></us></ke></ing></p> <p> keymaps <aps> 키 맵을 사용하면 패키지 명령의 바로 가기를 정의합니다. 그것들은 특정 스코프와 관련이 있으며, 여기서 범위는 원자 텍스트 편집자, Atom-Text-Editor : Not ([mini]) 또는 Atom-Workspace와 같은 CSS 선택기입니다. 셀렉터와 일치하는 요소가 초점을 맞추고 키 스트로크 패턴을 사용하면 사용자 정의 작업이 방출됩니다. </aps></p> <pre class="brush:php;toolbar:false">&lt;span&gt;// lib/main.js &lt;/span&gt;&lt;span&gt;'use babel'; &lt;/span&gt; &lt;span&gt;// This is your main singleton. &lt;/span&gt;&lt;span&gt;// The whole state of your package will be stored and managed here. &lt;/span&gt;&lt;span&gt;const YourPackage = { &lt;/span&gt; &lt;span&gt;activate (state) { &lt;/span&gt; &lt;span&gt;// Activates and restores the previous session of your package. &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;deactivate () { &lt;/span&gt; &lt;span&gt;// When the user or Atom itself kills a window, this method is called. &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;serialize () { &lt;/span&gt; &lt;span&gt;// To save the current package's state, this method should return &lt;/span&gt; &lt;span&gt;// an object containing all required data. &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;}; &lt;/span&gt; &lt;span&gt;export default YourPackage; &lt;/span&gt;</pre> <that> 입력 지점 에이 명령이 등록되어 있어야합니다 (atom.commands.add ()). <with> 크롬 개발자 도구로 디버깅 <p> <in> Atom의 디버깅은 웹에서 디버깅과 크게 다르지 않습니다. VIEW> DEVELOPER> 개발자 도구를 전환하여 발전된 오류를 보거나 코드에서 로그를 보거나 Atom의 마크 업을 이해하기 위해 Chrome Developer Tools를 활성화 할 수 있습니다. </in></p> <with> Jasmine의 단위 테스트 <the> Atom은 Jasmine 프레임 워크를 사용하여 테스트합니다. 테스트는 사양/ 최상위 디렉토리에 배치되며 파일은 -spec (예 : Fancy-component-spec.js)로 끝나야합니다. 테스트는 패키지를 실행하거나 게시 할 필요는 없지만 코드의 품질을 백업하고 새로운 기능을 추가 할 때 아무것도 깨지지 않도록하는 좋은 방법입니다. <pre class="brush:php;toolbar:false">&lt;span&gt;// lib/main.js &lt;/span&gt;&lt;span&gt;import &lt;span&gt;{ CompositeDisposable }&lt;/span&gt; from 'atom'; &lt;/span&gt; &lt;span&gt;const YourPackage = { &lt;/span&gt; &lt;span&gt;subscriptions: null, &lt;/span&gt; &lt;span&gt;activate (state) { &lt;/span&gt; &lt;span&gt;// Assign a new instance of CompositeDisposable... &lt;/span&gt; &lt;span&gt;this.subscriptions = new CompositeDisposable(); &lt;/span&gt; &lt;span&gt;// ...and adding commands. &lt;/span&gt; &lt;span&gt;this.subscriptions.add( &lt;/span&gt; atom&lt;span&gt;.commands.add('atom-workspace', { &lt;/span&gt; &lt;span&gt;'your-package:toggle': this.togglePackage &lt;/span&gt; &lt;span&gt;}) &lt;/span&gt; &lt;span&gt;); &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;// When your package get's deactivated, all added &lt;/span&gt; &lt;span&gt;// subscriptions will be disposed of at once. &lt;/span&gt; &lt;span&gt;deactivate () { &lt;/span&gt; &lt;span&gt;this.subscriptions.dispose(); &lt;/span&gt; &lt;span&gt;}, &lt;/span&gt; &lt;span&gt;togglePackage () { &lt;/span&gt; &lt;span&gt;// Code to toggle the package state. &lt;/span&gt; &lt;span&gt;} &lt;/span&gt;&lt;span&gt;}; &lt;/span&gt;</pre>. <test> 테스트를 실행하려면 Window : Run-Package-Specs 명령 또는보기> 개발자> Run 패키지 사양을 사용할 수 있습니다. <to> Travis CI에서 패키지 사양을 실행하려면 Atom의 블로그에 설정 방법에 대한 간단한 게시물이 있습니다. 패키지 흐름 <lot> 그것은 많은 입력이었습니다. 원자의 실제 흐름 또는 실행 순서는 대략 다음과 같습니다 (참고 : 테스트는 패키지 흐름의 일부가 아닙니다).<ol> <ots ots> Atom은 부팅하고 Package.json을 읽습니다 <li> <ke> 메뉴, 키 맵, 스타일 시트 및 기타 모든 구성이 적용됩니다 <c> activationCommands가 정의되면 <ul>가 실행됩니다 <li> </li> 메인 엔트리 포인트 (즉, activeate ())가 실행됩니다 <li> 패키지 매직 (예 : 사용자 입력에 반응, 뷰 생성, 파일 수정)이 작동합니다 </li> </ul> </c></ke> </li> <c> 당신은 패키지를 비활성화하거나 원자를 종료합니다 <li> <ial ial> Atom은 패키지 상태를 직렬화합니다 <ul> <li> </li> </ul> 결론 <article> 내 기사가 원자 패키지 개발에 대한 기본적인 이해를 얻는 데 도움이 되었기를 바랍니다. 불행히도 하나의 기사 만 다룰 수없는 많은 기능과 많은 주제가 여전히 있습니다. Atom Flight Manual을 살펴 보려면 다른 것이 무엇인지 확인하십시오. </article></ial> </li> <you> 어떤 패키지를 개발 하시겠습니까? <questions> 바닐라 JavaScript를 사용하여 Atom 패키지 작성에 대한 자주 묻는 질문 (FAQ) <illa> 바닐라 JavaScript 란 무엇이며 원자 패키지를 작성하는 데 중요한 이유는 무엇입니까? <li> 바닐라 JavaScript는 추가 라이브러리 나 프레임 워크가없는 평범한 순수한 JavaScript를 나타냅니다. 가볍고 효율적이며 사용자 정의 가능한 코드를 허용하기 때문에 Atom 패키지를 작성하는 데 중요합니다. Vanilla JavaScript를 사용하여 개발자는 더 빠르고 안전하며 디버깅 및 유지 관리가 쉬운 패키지를 만들 수 있습니다. 또한 패키지가 타사 라이브러리에 의존하지 않도록하여보다 신뢰할 수 있고 강력하게 만듭니다. <ul> 바닐라 JavaScript를 사용하여 Atom 패키지 작성을 시작하는 방법은 무엇입니까? <li> </li> 쓰기를 시작하려면 어떻게해야합니까? 바닐라 JavaScript를 사용하는 Atom 패키지는 먼저 개발 환경을 설정해야합니다. 여기에는 Node.js 및 Atom 설치가 포함됩니다. 이 설치되면 Atom 패키지 생성기를 사용하여 새 패키지를 만들 수 있습니다. 그런 다음 바닐라 JavaScript를 사용하여 패키지 작성을 시작할 수 있습니다. Atom 패키지 가이드 라인을 따라 패키지가 Atom 편집기와 호환되는지 확인하십시오. </ul> 바닐라 JavaScript에서 모듈을 가져오고 내보내는 방법은 무엇입니까? </li> </illa></questions></you></c></ots> </ol> 바닐라 JavaScript에서는 가져 오기를 사용할 수 있습니다. 코드에 모듈을 포함시키기위한 내보내기 명세서. 가져 오기 명령문을 사용하면 다른 모듈의 함수, 객체 또는 값을 가져올 수 있으며 내보내기 문은 모듈의 특정 부분을 다른 모듈에 사용할 수 있도록 할 수 있습니다. 기본 예는 다음과 같습니다. // module.js <h2>에서 함수 내보내기 함수 myFunction () { // 함수 코드 } </h2> // 가져 오기 다른 모듈의 함수 import {myfunction}에서 './module.js'; <benefits> 바닐라 JavaScript에서 코드를 모듈화하는 이점은 무엇입니까? <h3> </h3> 바닐라 JavaScript의 코드 모듈화에는 몇 가지 이점이 있습니다. 코드를보다 체계적으로 구성하고 이해하기 쉽고 유지 관리합니다. 또한 응용 프로그램의 다른 부분에서 동일한 모듈을 가져오고 사용할 수 있으므로 코드 재사용을 촉진합니다. 또한 각 모듈은 자체 종속성을 지정할 수 있으므로 종속성 관리에 도움이됩니다. <p> 바닐라 JavaScript로 작성된 Atom 패키지를 어떻게 디버그합니까? </p> Atom은 내장 된 개발자 도구 패널을 제공합니다. 패키지를 디버깅하는 데 사용할 수 있습니다. 개발자> 토글 개발자 도구를보기 위해이 패널을 열 수 있습니다. 여기에서 코드를 검사하고 중단 점을 설정하고 변수 및 네트워크 활동을 모니터링 할 수 있습니다. 또한 코드의 Console.log () 문을 사용하여 디버깅 목적으로 콘솔에 값을 출력 할 수 있습니다. <h3> Atom 패키지의 다른 버전과 Atom 패키지를 어떻게 호환 할 수 있습니까? </h3> <p> Atom 패키지가 다른 버전의 Atom과 호환되도록하려면 Atom API 지침을 따르고 더 이상 사용되지 않은 API를 사용하지 않아야합니다. 또한 다양한 버전의 Atom에서 패키지를 테스트하여 호환성 문제를 식별하고 수정해야합니다. 또한 Package의 Package.json 파일에 필요한 최소 Atom 버전을 지정할 수 있습니다. </p> Atom 패키지를 어떻게 게시합니까? <h3> 일단 Atom 패키지를 작성하고 테스트 한 후에는 여러분 APM Publish 명령을 사용하여 Atom 패키지 저장소에 게시 할 수 있습니다. 게시하기 전에 APM 버전 명령을 사용하여 새 버전의 패키지를 만들어야합니다. 또한 패키지 용 Github 저장소를 작성하고 코드를 푸시해야합니다. </h3> 바닐라 JavaScript로 작성된 내 원자 패키지의 성능을 향상시키는 방법은 무엇입니까? <p> 바닐라 JavaScript로 작성된 Atom 패키지에서 ES6 기능을 사용할 수 있습니까? </p> <h3> 예, 사용할 수 있습니다. Atom 패키지의 ES6 기능. Atom의 기본 Node.js 런타임은 LET 및 Const 선언, 화살표 기능, 템플릿 리터럴 등을 포함한 대부분의 ES6 기능을 지원합니다. 그러나 ES6 기능을 사용하여 이전 버전의 원자와 호환성 문제를 일으키지 않도록해야합니다.<handle> 바닐라 javaScript로 작성된 내 원자 패키지의 오류를 어떻게 처리합니까? <h3> Try-Catch 블록을 사용하여 Atom 패키지의 오류를 처리 할 수 ​​있습니다. 이를 통해 코드 실행 중에 발생할 수있는 예외를 잡고 처리 할 수 ​​있습니다. Atom.notifications API를 사용하여 사용자에게 오류 메시지를 표시 할 수도 있습니다. 이 API는 오류 알림을 포함하여 다양한 유형의 알림을 표시하는 방법을 제공합니다.</h3></handle> </h3></benefits></lot></to></test></the></with></with></that></pose></ing></changes></is></view></make></comp></must>

위 내용은 바닐라 JavaScript를 사용하여 Atom 패키지를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!