今日ES6を使用する簡単な例

5月の祝日におめでとうございます。 今日、ECMAScript 6（ES6）を使用して私の経験を共有したいと思います。 この記事を書く動機は、ES6を使用するための完全なステップバイステップガイド、またはバベルトランスパイラーを使用するモジュールシステムがなかったことです。 誰も気にしない-ようこそ！



Babelの使用例は数多くありますが、ES6モジュールの使用に関しては、グーグルで検索する必要があります。 その結果、完成したガイドを英語でさえグーグルしなかったので、ガイドを書きました。 私は非常に簡潔で有益です。



お気に入りのLinuxディストリビューションにインストールする必要があるもの：

sudo aptitude install nodejs #   npm sudo npm install -g babel #   ES6  ES5 sudo npm install -g browserify #    sudo npm install -g watchify #    Browserify cd path_to_sources npm install --save-dev babelify #   Babel  Browserify
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テスト用のES6コードを書きましょう（ プロジェクト全体はこちら ）：

 // src/lib.js class ES6Today { use() { console.log("Hello from a JS class!"); } } export { ES6Today }; // src/main.js import { ES6Today } from "./lib"; var es6 = new ES6Today(); es6.use(); // output: Hello from a JS class!
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このガイドの主な目標はES5のES6コンパイルテクノロジーの1つを示すことなので、指定されたソースコードはES6を使用する最も便利な例のふりをしません。



コンパイルに直接進みます。

 watchify src/main.js -t babelify -o build/main.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後のチームの原理を分析しましょう。 WatchifyデーモンはBrowserifyコレクターを起動し、main.jsファイルのソースコードとmain.jsで使用されるモジュールの変更を監視します。 ソースコードへの変更を保存すると、Watchifyデーモンが停止するまで、WatchifyデーモンがBrowserifyコレクターを再度起動します。



babelifyの-tフラグは、Browselifyコレクターのデフォルトモジュール形式（CommonJS）でBabelトランスポーターによって生成されたコードを使用していることを意味します。 -oフラグは、HTMLページに添付する単一の出力ファイルを示します。



その結果、現在ES6を使用する便利な方法があります。



PSそして、どのような方法を使用していますか（フロントエンドにより興味がありますか）？