複習babel

對babel進行復習😂😂😂

Babel Register

第一：在項目根目錄下建立一個 .babelrc 文件，寫入如下內容：

{
  "presets": [
  ]
}

第二：安裝對應的轉碼規則：

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

# ES7不一樣階段語法提案的轉碼規則（共有4個階段），選裝一個
$ 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

第三：將 .babelrc 文件中修改成如下內容：

{
  "presets": [
    "es2015"
  ]
}

第四步（從第四步開始，前三部必不可少）：

• babel-cli：命令行轉碼
• babel-node：babel-cli工具自帶一個babel-node命令，提供一個支持ES6的REPL環境
• babel-register：實時轉碼，因此只適合在開發環境使用
• babel-core：若是某些代碼須要調用Babel的API進行轉碼，就要使用babel-core模塊

babel-cli：

一種使用方式就是全局安裝：npm install -g babel-cli（能夠經過 npm root -g 查看全局包安裝目錄），
只要全局安裝了 babel-cli，則會在命令行中多出一個命令：babel。

這裏若是使用全局安裝的 babel-cli 進行轉碼是沒有問題的，可是問題是若是一旦項目給了別人，
別人不知道你使用了這個轉碼工具，因此解決方式就是將 babel-cli 安裝到本地項目中：

npm install --save-dev babel-cli

這種第三方命令行工具若是安裝到本地項目，會在 node_modules 中生成一個目錄：.bin，
而後第三方命令行工具會將對應的可執行文件放到該目錄中。

這樣的話，就能夠直接在本地項目中使用該第三方命令行工具了。

對於如何使用，則能夠經過配置 package.json 文件中的 scripts 字段來配置使用：

{
  "name": "babel-demo",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel demo1.js"
  },
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0"
  }
}

babel-register（適合開發階段，實時編碼轉換）:

第一：安裝 babel-register

npm install --save-dev babel-register

第二：添加一個傀儡文件(main.js)：

require('babel-register')
require('你的核心功能代碼入口文件模塊')

第三：使用 node 執行 main.js，而不是你的入口文件.

--save 和 --save-dev

經過 --save 參數安裝的包，是將依賴項保存到 package.json 文件中的 dependencies 選項中。
經過 --save-dev 參數安裝的包，是將依賴項保存到 package.json 文件中的 devDependencies 選項中。

不管是 --save 或者 --save-dev 安裝的包，經過執行 npm install 都會將對應的依賴包安裝進來。

可是，在開發階段會有一些僅僅用來輔助開發的一些第三方包或是工具，而後最終上線運行（到了生產環境），
這些開發依賴項就再也不須要了，就能夠經過 npm install --production 命令僅僅安裝 dependencies 中的 依賴項