こんにちは、世界は静止していません。昨年ECMAScript 2015（別名ES6）がリリースされ、多くの革新をもたらしました。ExtJSの混乱とSencha cmdのみがこの仕様をサポートする方法をまだ学習していません。 現在ES6を念頭に置いてアプリケーションを開発する理由はたくさんあります。 私が見ているように、主なものは新しい標準を研究しており（市場の競争力が高まっています）、目を楽にするよりシンプルで簡潔なコードを作成しています。 この記事では、アセンブリをオンザフライで実行するBabelクロスコンパイラを使用して、ExtJS用のES6コードを記述する機能を追加するプロセスを示します。

Babelを構成する

まず、テストアプリケーションを作成する必要があります

sencha -sdk "path\to\framework" generate app TestApp "path\to\application"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Babelをインストールするにはnpmも必要です。 作成したアプリケーションのルートディレクトリで、コマンドを使用してpackage.jsonファイルを作成します

 npm init
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

いくつかの質問に答えると、ファイルが正常に作成されます。次に、クロスコンパイラ自体とそのプラグインをインストールする必要があります。

 npm install babel-cli --save-dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 npm install babel-preset-es2015 --save-dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、プロジェクトビルドコマンドを追加する必要があります。そのため、scriptsセクションをpackage.jsonに追加します。 また、Babel用のプラグインを追加することを忘れないでください。プラグインなしでは機能しません。このため、Babelセクションを追加します。

 ... "scripts" : { "build-prod": "./node_modules/.bin/babel es6 -d app --comments=false --compact=true", "build-debug": "./node_modules/.bin/babel es6 -d app --sourceMaps=true", "watch": "./node_modules/.bin/babel es6 -d app --watch" }, "babel": { "plugins": [ "check-es2015-constants", "transform-es2015-arrow-functions", "transform-es2015-block-scoped-functions", "transform-es2015-block-scoping", "transform-es2015-classes", "transform-es2015-computed-properties", "transform-es2015-destructuring", "transform-es2015-for-of", "transform-es2015-function-name", "transform-es2015-literals", "transform-es2015-object-super", "transform-es2015-parameters", "transform-es2015-shorthand-properties", "transform-es2015-spread", "transform-es2015-sticky-regex", "transform-es2015-template-literals", "transform-es2015-typeof-symbol", "transform-es2015-unicode-regex", "transform-regenerator", [ "transform-es2015-modules-commonjs", { "strict" : false }] ] } ...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Sencha cmdのセットアップ

プロジェクトのExtJS側で、app.jsファイルをプロジェクトルートからappフォルダーに転送する必要があります。 次に、アプリフォルダーの名前をes6に変更する必要があります。

 mv app.js app mv app es6
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

app.jsonファイルで新しいapp.jsの場所を忘れずに指定してください。

 ... "js": [ ... { "path": "app/app.js", "bundle": true } ] ....
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後の手順は残ります。プロジェクトのルートにあるbuild.xmlファイルを編集し、プロジェクトタグ内で次の構成を追加します。

 <target name="-before-build"> <x-shell reloadprofile="true" dir="${basedir}"> npm run build-debug </x-shell> </target>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、sencha（ビルド、ウォッチ、リフレッシュ）コマンドを使用すると、プロジェクトがその場で再ビルドされ、アプリケーションのすべてのソースコードがes6フォルダーに保存されます。 おめでとう、今、あなたは時代に遅れずについていくことができます:)