<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      babel的安裝與使用

      時間:2021-05-07 17:32:54 類型:JS/JQUERY
      字號:    

      1.babel是什么


      babel是一個javascript轉譯器。為什么會有babel存在呢?原因是javascript在不斷的發展,但是瀏覽器的發展速度跟不上。以es6為例,es6中為javascript增加了箭頭函數、塊級作用域等新的語法和Symbol、Promise等新的數據類型,但是這些語法和數據類型并不能夠馬上被現在的瀏覽器全部支持,為了能在現有的瀏覽器上使用js新的語法和新的數據類型,就需要使用一個轉譯器,將javascript中新增的特性轉為現代瀏覽器能理解的形式。babel就是做這個方面的轉化工作。

      2, babel使用

          

       在本地磁盤上創建一個文件夾es6(名字任意),在該文件夾下打開命令行工具,初始化項目。

      F:\es6>npm init -y

        這個命令目的就是創建一個默認的package.json文件

           本地安裝babel命令行工具

        安裝babel的命令行工具的目的是為了在命令行使用babel。

        babel命令行工具可以全局安裝也可以本地安裝,官方文檔推薦本地安裝,原因有2點;

        1.本地安裝不同的項目可以使用不同版本的babel,你也可以單獨對某個項目的babel進行升級等操作

        2.每個項目單獨安裝的意味著對計算機環境沒有依賴,便于移植

        在命令行中繼續執行如下命令

      npm install --save-dev babel-cli

        這樣就已經在本地安裝好babel了。

        此時我的package.json文件如下

      {
        "name": "es6",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
         
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "babel-cli": "^6.26.0",
        }
      }

      在命令行中調用babel

        本地安裝的babel是不能夠在直接命令行中運行的,為了在命令行中運行babel,我們有兩個方法,

      1. 是需要配置下package.json文件的scripts項。比如如下代碼,配置了一個build命令,運行該命令(npm run build)的時候就會在命令行執行babel src -d lib


      2. {
          "name": "es6",
          "version": "1.0.0",
          "description": "",
          "main": "index.js",
          "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "babel src -d lib"
          },
          "keywords": [],
          "author": "",
          "license": "ISC",
          "devDependencies": {
            "babel-cli": "^6.26.0",
           
          }
        }

       第2個方法是你需要可以進入node_modules文件夾,再進入.bin文件夾,然后執行在命令行中執行babel src -d lib。

        推薦使用npm run build的方法。

        這里需要解釋babel src -d lib這個命令的意思。這個命令目的是把src文件夾下的文件都轉譯,轉譯后的文件放到lib目錄下。

        ps:此時無論你是運行npm run build 還是運行babel src -d lib命令(其實兩個方法本質上都是一樣的,都是運行babel src -d lib)命令行都會報錯,原因是現在還沒有src文件夾??梢韵炔挥霉芩?,稍后我們再新建src文件夾。

        創建.babelrc配置文件

        在cmd中鍵入以下命令

        type nul>.babelrc

        這個時候你的文件夾里就多了一個.babelrc文件了。windows是不能直接創建空文件名的文件的,所以必須通過命令行創建。

        安裝babel的轉譯器

        這里我們以babel-preset-latest為例。

        在命令行中執行如下代碼就會安裝babel-preset-latest轉譯器。

          # 最新轉碼規則
        npm install --save-dev babel-preset-latest

      注意:babel命令行工具(babel-cli)跟babel轉譯器是兩個不同的東西,命令行工具并不具有轉譯代碼的功能,只是為了在命令行中使用babel。要轉碼必須安裝轉譯器,比如babel-preset-latest轉譯器或者babel-preset-react轉譯器。要轉譯的時候,還要在.babelrc文件或者命令行中配置這些轉譯器(presets)選項

          配置.babelrc文件

        .babelrc用于配置除回調以外的所有babel api 選項。例如plugins和presets。plugins用于配置我們轉譯所需要的插件,presets用于配置我們所需要的轉譯器。

        .babelrc不是必須的,我們在.babelrc中配置的選項都可以通過命令行添加,比如在命令行執行 babel src -d lib --presets=latest等價于在.babelrc中配置 "presets":["latest"]。當然.babelrc要明顯方便很多。

        babel在轉譯代碼的過程中會自動讀取當前目錄.babelrc配置文件,如果當前目錄沒有的話就遍歷整個目錄樹去尋找,直到找到.babelrc文件或者含有"babel"字段的package.json文件,然后使用這些配置選項來轉譯代碼。

        1、如果沒有.babelrc文件,或者沒有在其他文件中設置過babel的presets的配置選型,并且命令行中也沒有配置–presets,那么代碼是不會轉譯的。原es6代碼什么樣,轉譯后的代碼還是什么樣。

        2、如果你的.babelrc或者你的命令行使用了你沒有安裝的轉譯器(presets),代碼就會報錯

        3、但.babelrc中的配置跟你在命令行中使用的配置沖突的時候,以.babelrc中的配置為準

      {
      	"presets":[
      		"latest"
      	],
      	"plugins":[]
      }

       babelrc的替代方案

        如果你不想生成.babelrc文件,你可以在你的package.json文件中對babel進行配置。如果你使用gulp或者webpack之類的管理工具的話,也可以在這里工具的配置選項里添加babel的配置選項。

        以下以在package.json中配置為例。

      {
        "name": "es6",
        "version": "1.0.0",
        "description": "",
        "main": "arrow.js",
        "scripts": {
          "build": "babel src -d lib --comments=true"
        },
        "babel":{
          //babel選項
          "presets":["es2015"],
          "comments":false
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "babel-cli": "^6.24.1",
          "babel-loader": "^7.1.1",
          "babel-preset-env": "^1.6.0",
          "babel-preset-es2015": "^6.24.1",
          "babel-preset-react": "^6.24.1",
          "webpack": "^3.2.0"
        }
      }

        在package.json中配置babel等同于使用.babelrc文件

        編寫es6代碼

              在當前目錄分別建設src和lib文件夾

             在src下面新建arrow.js文件, 內容如下:

         input.map(item => item + 1);

        轉譯es代碼

            執行命令: npm run build

            看lib文件下, 生成了 arrow.js文件, 內容如下:

      "use strict";
      
      input.map(function (item) {
        return item + 1;
      });

        經過上面的步驟我們已經完成了轉譯代碼的工作


      黄网站免费 <