• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:-綠色安全純凈官方版!

      es6中babel的用法介紹(代碼示例)

      時間:2021-3-25作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      本篇文章給大家帶來的內容是關于es6中babel的用法介紹(代碼示例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

      polyfill

      我們都知道,js總是一直存在著兼容性問題,雖然其他語言也存在著兼容性問題,比如c++、java,但那種兼容性是新特性在舊版本上的不兼容,js則存在著各種奇形怪哉的不兼容。這其中有著非常復雜的歷史和時代的原因,并不加以累述。而解決兼容性問題的方法在以前只存在一種,那就是polyfill。先說什么是polyfill,比如我們想要用數組的一個新的方法includes,在較新版本的瀏覽器下,可以直接使用:

      141886496-5bfab34995100_articlex.png

      但是在舊的瀏覽器下,比如ie10,就會報錯:

      2148891218-5bfab38064dec_articlex.png

      這種情況下我們可以通過自定義一個方法來解決:

      function includesPolyfill(){
          if(!Array.prototype.includes){
              Array.prototype.includes=function(element){
                    for(var i=0; i<this.length; i++){
                        if(this[i]===element)return true
                    }
                    return false
              }
          }
      }

      這里定義一個簡單的方法,添加到Array.prototype上,為了簡單,并沒有做太多的異常檢測,接著在代碼中引入以上方法并優先執行,就可以做到在不兼容這個方法的js環境總直接調用Array.protorype.includes方法了:

      1393804227-5bfab728d1447_articlex.png

      這就是polyfill,但是polyfill有其局限性,對于可以用舊的方法實現的新特性,可以使用polyfill來解決,比如Array.prototype.includes,但是,對于一些無法使用舊方法實現的新特性、新語法,比如箭頭函數、const之類的,polyfill就無能為力了,這個時候需要使用另一種方法:預編譯,或者說是語法轉換。

      預編譯

      在之前的js開發中,是沒有預編譯這個流程的,擼完js就直接部署了,但是隨著前端工程化的推進,預編譯也就出現了,特別是typescript之類的語言出現以后,編碼和發布就不再是同一種方式了。

      現在在發布之前,總是需要打包,而打包有許多的流程,比如資源整合、代碼優化、壓縮混淆...而在其中對代碼的操作上,我們可以將新的語法轉化成舊的語法來達到對新語法的支持。

      簡單的說就是,新語法->編譯器->舊語法。

      編譯器的作用就是將輸入的源碼中的新特性轉化成就語法,說白了就是字符串處理,比如對箭頭函數的處理:var add=(num1, num2)=>num1+num2,這段代碼在不兼容箭頭函數的環境中,比如ie10,是無法執行的

      133705236-5bfabacf31094_articlex.png

      但是我們可以通過語法轉化、編譯處理,將源碼轉化成var add=function(num1, num2){return num1+num2},這樣在不支持箭頭函數的瀏覽器中就可以執行了

      3100663774-5bfabb64caf2e_articlex.png

      現在來實現一個簡單的編譯器,當然只支持箭頭函數

      function translate(src){
          let [_, name, args, body]=src.match(/\((.+)\)=>(.+)/)
          return `function ${name}(${args}){return ${body}}`
      }

      為了簡單,只是使用簡單的正則提取來做實驗,并且不做任何異常處理

      translate('var add=(num1, num2)=>num1+num')
      //  var add=function(num1, num2){return num1+num2}

      將轉化結果保存成文件,就可以在不兼容箭頭語法的環境中使用了。甚至我們可以在瀏覽器中嵌入這個編譯器,將源碼編譯之后使用Function構造函數或者eval來執行,達到執行新語法的作用,這種情況下,稱為運行時編譯器,當然一般不會這么用。

      使用babel

      很明顯,不可能自己寫這么一個編譯器,那還要不要做項目了?這時候只能借助社區的力量了,babel就是這么一個東西,接下來將會使用babel來解析箭頭函數

      初始化一個項目

      $ mk babel-demo 
      $ cd babel-demo
      $ npm init -y

      安裝babel:
      注意:(babel7以后babel相關的庫基本都是放在@babel命名空間下)

      $ npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-arrow-functions

      @babel/core:核心庫

      @babel/cli:命令行工具

      @babel/plugin-transform-arrow-functions:箭頭函數語法轉化插件

      編寫代碼:

      var add=(num1, num2)=>num1+num2

      使用babel解析

      $ npx babel --plugins @babel/plugin-transform-arrow-functions index.js -o bundle.js

      上面命令的意思是將index.js使用babel轉化,并將結果放到bundle.js中,執行之后,將會生成bundle

      --plugins:為這次轉化添加插件支持

      -o:輸出文件

      查看轉化結果
      查看新生成的bundle.js,可以發現,箭頭函數被轉化成了普通的funciton, 在任何環境中都支持。

      var add = function (num1, num2) {
        return num1 + num2;
      };

      說明

      所以,對于新特性,我們可以通過使用polyfill,也可以通過語法轉化來達到兼容。

      babel配置文件

      很明顯,使用babel cli的局限性很大,容易出錯、不直觀、繁瑣等,所以babel還是支持配置文件的方式:

      .babelrc方式

      在項目新建.babelrc文件,并使用JSON語法配置

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

      直接寫在package.json的babel節點

      {
        "name": "my-package",
        "version": "1.0.0",
        "babel": {
          "presets": [ ... ],
          "plugins": [ ... ],
        }
      }

      babel.config.js方式

      module.exports = function () {
        const presets = [ ... ];
        const plugins = [ ... ];
      
        return {
          presets,
          plugins
        };
      }

      兩種方式大同小異,區別就是一個是動態的,一個是靜態的,推薦小項目就用.babelrc,大項目就使用babel.config.js

      babel配置之plugin

      plugin是babel中很重要的概念,可以說,plugin才是構成babel擴展性的核心,各種各樣的plugin構成了babel的生態,可以在這里看一些babel的插件列表。

      .babelrc配置文件中配置插件

      {
          "plugins": ["@babel/plugin-transform-arrow-functions"]
      }

      這時候我們再執行npx babel index.js -o bundle.js,就可以不指定plugin也能正常轉化箭頭函數了
      如果一個plugin可以配置參數,則可以這么配置:

      {
        "plugins": [
          ["@babel/plugin-transform-arrow-functions", { "spec": true }]
        ]
      }

      babel配置之preset

      在一個項目中,我們總是要配置一大堆的插件,這個時候,就是preset出馬的時候了,那什么是preset呢?其實就是預置插件列表了,引入了一個preset就包含了一個系列的plugin
      比如preset-react就包含了以下插件:

      @babel/plugin-syntax-jsx

      @babel/plugin-transform-react-jsx

      @babel/plugin-transform-react-display-name

      .babelrc配置preset-react

      {
        "presets": ["@babel/preset-react"]
      }

      如果有配置項,就醬:

      {
        "presets": [
          [
            "@babel/preset-react",
            {
              "pragma": "dom", // default pragma is React.createElement
              "pragmaFrag": "DomFrag", // default is React.Fragment
              "throwIfNamespace": false // defaults to true
            }
          ]
        ]
      }

      babel和webpack

      添加webpack.config.js

      const path=requrie('path')
      module.exports={
          entry:path.resolve(__dirname, 'index.js'),
          output:{
              path: path.resolve(__dirname, 'dist'),
              filename:'bundle.js'
          },
          module: {
              rules: [
                { test: /\.js$/, use: 'babel-loader' }
              ]
            }

      - 添加相關依賴

      $ npm install --save-dev webpack webpack-cli babel-loader
      "
      - `webpack`:`webpack`核心庫
      - `webpack-cli`:`webpack`命令行工具
      - `babel-loader`:`babel`的`webpack loader`

      打包

      $ npm webpack

      查看編譯結果
      省略無關的東西,可以看到,箭頭函數也被轉化成了function

      /***/ "./index.js":
      /*!******************!*\
        !*** ./index.js ***!
        \******************/
      /*! no static exports found */
      /***/ (function(module, exports) {
      
      eval("let add = function (num1, num2) {\n  return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?");
      
      /***/ })
      
      /******/ });

      支持es6

      支持es6可以使用@babel/present-env來代替一系列的東西,還有許多的配置像,比如兼容的瀏覽器版本,具體可以看這里

      安裝依賴包

      $ npm install --save-dev @babel/preset-env

      配置

      {
          "plugins": ["@babel/present-env"]
      }

      打包

      $ npm webpack

      查看效果

      /***/ "./index.js":
      /*!******************!*\
        !*** ./index.js ***!
        \******************/
      /*! no static exports found */
      /***/ (function(module, exports) {
      
      eval("let add = function (num1, num2) {\n  return num1 + num2;\n};\n\nmodule.exports = add;\n\n//# sourceURL=webpack:///./index.js?");
      
      /***/ })
      
      /******/ });

      總結

      這只是babel功能的一個小覽,了解一下babel的基本使用和一些概念而已。

      以上就是es6中babel的用法介紹(代碼示例)的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




      關鍵詞:es6中babel的用法介紹(代碼示例)




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产