ケーブルについて

昔からwebpackを使っていたので、不思議な構築ツールだと思いました.当時は穴のお父さんのドキュメントの配置についていて、多くのものがその理由を知らないので、babelはその中の1つで、その理由を知らない場合、多くのものが覚えられませんでした.最近辛抱強く関連ドキュメントを見て、やっと少し悟りました.後で配置と使用を容易にするために記録します.

グローバル構成babel-cli

npm install babel-cli -g //    babel      ，            babel  

babel ？はnpmディレクトリC:\Users\Administrator\AppData\Roaming
pmにbabel.cmdファイルが生成されるため、開くとnode.cmdファイルがあります.开いて见つからなかったのは、PCに隠しファイルが设置されていなかったからです(开発するには隠しファイル名と隠し接尾辞を表示するのが望ましい).

プロジェクトのフォルダにbabelをインストールするために必要なトランスコードルールセット

$ npm install --save-dev babel-preset-latest    //       

#         （      ）
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

これは歴史を理解するために理解されています.簡単に言えばES 6は2015年6月に発表されました.TC 39協会は毎年6月にjs文法規則をアップグレードすることを決定しました.世界の誰もがTC 39に議案を提出することができます.議案は4段階を経て、TC 39のメンバーは会議を開いて議案を決定する必要があります.基本的にstage-2に着きました.この議案はほとんど懸念なく次のバージョンになった.多くの人はES 6をES 2015と呼んでいますが、これは故障していません.後ろにES 2017が聞こえます.ES 2018も故障していません.しかし、ES 7、ES 8というのは少しクレイジーで、毎年1つのバージョンをアップグレードすれば、jsという言語の更新の頻度も速すぎて、私はもっと後のバージョンをES 6.xという観点を受け入れたいと思っています.

プロジェクトのフォルダで構成.babelrcファイル(.babelrcファイルはjsonファイル)

  {
      "presets":[ 
                      "latest",
                      "stage-2"
                   ],            //         
      "plugins":[]             //         ，       
  }

コマンドライントランスコードbabel-cli

#            
$ babel example.js

#           
# --out-file   -o         
$ babel example.js --out-file compiled.js
#   
$ babel example.js -o compiled.js

#       
# --out-dir   -d         
$ babel src --out-dir lib
#   
$ babel src -d lib

# -s     source map  
$ babel src -d lib -s

上のコードはグローバル環境でBabelトランスコードを行います.これは、プロジェクトが実行される場合、グローバル環境にBabelが必要であることを意味します.つまり、プロジェクトは環境への依存を生み出します.一方、このようにしても、異なるバージョンのBabelを使用するプロジェクトをサポートすることはできません.解決策はbabel-cliをプロジェクトにインストールすることです.

#   
$ npm install --save-dev babel-cli

書き換えpackage.jsonファイル

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"    //src   lib                      
  },
}

トランスコードするときは、次のコマンドを実行します.

$ npm run build

終わりだ!