Electron、SASS、TypeScript、Pug（Jade）、Polymer、およびWindowsアプリケーションを作成するためのフライングサイクリング

少し前に、GitHub'a-Atomの発案に出会いました。 そしてすぐに、このエディターを作成するために使用されたテクノロジーに興味を持ちました。 そして、判明したように、基本はElectron-Chromiumとnode.jsを1つのボックスに収めたものです。 当然のことながら、私はこれがどんな種類の獣であるかを調べることにしましたが、その時は未知の技術であるTypeScript、SASS、およびJade（現在のPug）に接続しました。 アプリケーションのアイデアすら考えていませんでした-それは有名なサービスであるTodoistのデスクトップ版になるでしょう。

誰が気にします-猫へようこそ。

どこから始めますか？

ソースへの特にせっかちなリンク 。

さて、プロジェクトのクローンを作成することから始める必要があります。

git clone https://github.com/Defenderbass/TodoistElectron.git cd TodoistElectron
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のステップは、プロジェクトのルートにあるinstall.batバッチファイルを実行するための依存関係をインストールすることです。 ./package.jsonで説明されているアプリケーションのビルドおよび起動モジュール、アプリケーション./source/package.jsonの操作用モジュール（この場合は存在しません）、および./source/windows/bower.jsonで説明されている依存関係がインストールされますクライアント側のレンダリング。 クライアントでは、フレームワークの公式Webサイトで入手できるかなり大きな「Paper Elements」カタログのPolymerといくつかのカスタム要素を使用します。

すべての依存関係を正常にインストールした後、ルートフォルダーで実行してアプリケーションを起動できます。

 build
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、プログラムのアセンブリは初期化され、アセンブリが成功するとその後の起動が行われます。 出力では、投稿の最初で唯一の画像に似たものを取得する必要があります。

そしてもっとあれば？

そして、さらに詳細な場合は、 build.batを見る価値があります。

 grunt build && run
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

つまり、 Gruntfile.jsで説明されている登録済みタスクが最初に立ち上がります。

 grunt.registerTask('build', [ 'clean:build', 'sass:dev', 'sass:components_dev', 'typescript:dev', 'typescript:components_dev', 'copy:dev', 'copy:pug', 'pug:dev' ]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このタスクは、sassファイルのコンパイル、TypeScriptのコンパイル、テンプレートpugファイルの一連のアクションを順次発生させます。 各タスクは./build_scriptsディレクトリ内の同じ名前のファイルに対応し、これらのファイルで説明されている構成は自動的にgrunt-configに分類されます。

アセンブリが完了すると、 runコマンドが実行され 、アプリケーション自体が起動されます。 Gruntに慣れている場合は、アセンブリを理解するのは簡単です。

構造について少し

./sourceディレクトリには、すべてのプログラムソースが含まれています。

• ./package.jsonと依存関係の説明およびメインファイル。
• ./app.ts-ページ（ウィンドウ）のレンダリングプロセスを発生させるメインの実行可能ファイル。
• ./windows-レンダリング用のファイルが格納されているディレクトリ。この例では最もボリュームがあります。 これには、ライブラリ（Polymer）、一部の自作モジュール、クラスデコレータ、Polymerで作成されたカスタム要素が含まれます。

作成されたページでは、3つのカスタムの自己記述要素のみが使用されます。 カスタム要素のあるクラスを別のクラスから継承したかったのですが、Polymerはそのような機会をすぐに提供しないので、要素クラスのデコレータの形でラッパーを作成して、要素のメソッドと属性を簡単に決定し、結果として得られるクラスを簡単に転送できます継承。

Webview

Todoistサービス自体のコンテンツは、Electron開発者から親切に提供されたwebviewタグ内に配置され、分離されます。 表示されたページのアドレスでsrc属性のみを指定し、ページの正しい調和のとれた表示に必要なスタイルを指定する必要があります。

結論として...

プロジェクトの本質といくつかのポイントを説明していないこのような簡潔な話をおaびしますが、上記の技術を備えたコンパートメントのエレクトロンに興味がある場合は、プロジェクトを理解することは難しくありません。

PS：プロジェクトのルートには別のバッチファイルがあります（まだ気付いていない場合）-「release.bat」-起動するとプロジェクトが収集され、特別なコンテナーapp.asarにパックされ、すべてが./build/release/distフォルダーに入れられますメインの実行ファイルは「Todoist.exe」です。 完成したプログラムは、たとえばSmart Install Makerなどのユーティリティを使用して1つのインストールファイルにまとめて、ユーザーのマシンからソフトウェアを簡単にインストール/アンインストールできます。