Bable的使用

Sanchi 發布于2019-08-23 15:40 / 1923人閱讀

摘要：二配置文件有兩種并行的配置文件的方式，可以一起使用，也可以多帶帶使用。屬性告訴要轉換的源碼使用了哪些新的語法特性，是一組的集合。轉碼規則轉碼規則不同階段語法提案的轉碼規則共有個階段，選裝一個

一、bable簡介

babel是一個工具鏈，用于將ES6+語法轉換為當前版本瀏覽器等環境兼容的javascript代碼。babel目前已經支持了最新版本的javascript語法，對于目前尚未被瀏覽器支持的語法，可以通過babel插件支持。

二、配置文件

Babel有兩種并行的配置文件的方式，可以一起使用，也可以多帶帶使用。

項目范圍的配置

文件相關配置

.babelrc（和.babelrc.js）文件

package.json中"babel"關鍵字的部分

1. 項目范圍的配置

根目錄創建 babel.config.js 文件。babel.config.js 的官方文檔在這里 babel

2. 文件相關配置 1）.babelrc（和.babelrc.js）文件

在Babel執行編譯的過程中，會從項目的根目錄下的 .babelrc文件中讀取配置。.babelrc是一個json格式的文件。在.babelrc配置文件中，主要是對預設(presets) 和插件(plugins) 進行配置。.babelrc配置文件一般為如下：

{
  "plugins": [
     [
      "transform-runtime",
      {
        "polyfill": false
      }
     ]
   ],
   "presets": [
     [
       "env",
       {
         "modules": false
       }
     ],
     "stage-2",
     "react"
  ]
}

plugins該屬性是告訴babel要使用那些插件，這些插件可以控制如何轉換代碼。
presets屬性告訴Babel要轉換的源碼使用了哪些新的語法特性，presets是一組Plugins的集合。官方提供以下的規則集，你可以根據需要安裝。

# 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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102410.html

babel7 重新理解

摘要：主要功能點語法轉換墊片兼容處理，通過方式在目標環境中添加缺失的特性源碼轉換其他使用理念主要通過插件的形式達到轉換代碼的目的。就是解決這個問題的。測試環境 node 10.14.1Babel 7.4.3 Babel 是什么？ Babel 是一個工具鏈，主要用于將 ECMAScript2015+版本的代碼轉換為向后兼容的 Javascript 代碼，以便能夠運行在當前和舊版本的瀏覽器或其...

avwu 2019-08-23 17:55 評論0 收藏0
webpack打包js

摘要：打包的兩種方式命令行指定的配置文件使用命令行打包一創建兩個文件創建，導出一個加法的函數，使用這個函數。二使用命令打包在當前目錄下使用這里入口是輸出文件是，這樣就會看到文件中多出一個文件。創建一個文件運行，引入運行，控制臺會打印。 webpack打包的兩種方式 webpack entry output （命令行） webpack -config webpack.conf.js (指定w...

Rango 2019-08-22 15:16 評論0 收藏0
webpack - babel配置

摘要：配置是一個編譯器，是前端開發中的一個利器。其中，插件是為了告訴只編譯批準的內容，相當于及最新版本。安裝用法將下面內容添加到文件中更多細節參考插件。 webpack - babel配置 babel是一個javascript編譯器，是前端開發中的一個利器。它突破了瀏覽器實現es標準的限制，使我們在開發中可以使用最新的javascript語法。通過構建和babel，可以使用最新js語法進行...

yunhao 2019-08-22 16:00 評論0 收藏0
記一次 webpack 打包體積優化

摘要：手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得，所以現在必須進行優化。用于生產環境的打包，設置其為后，這些庫會提供最小體積的文件。這種情況打包后的體積要更小一些。最后打包結果的體積開銷主要就是以上幾項。手頭做的項目開發得差不多了，而打包配置是一開始粗略配置的，不大的項目打包出來得6MB+，所以現在必須進行優化。打包結果分析執行命令 webpack ...

tomlingtm 2019-08-26 11:47 評論0 收藏0
2017年 JavaScript 框架回顧 -- 后端框架

摘要：本文是年框架回顧系列的最后的一篇文章，主要介紹的后端框架情況。葡萄城公司成立于年，是全球領先的集開發工具商業智能解決方案管理系統設計工具于一身的軟件和服務提供商。本文是2017年 JavaScript 框架回顧系列的最后的一篇文章，主要介紹 JavaScript 的后端框架情況。 showImg(https://segmentfault.com/img/bV2TPd?w=735&h=...

xiaoqibTn 2019-08-26 11:31 評論0 收藏0