1. 程式人生 > >Babel——ES6轉換

Babel——ES6轉換

1. 線上轉換 https://babeljs.cn/
2. 手動轉換Babel-cli
首先 npm -init

**1)配置.Babelrc檔案** 
{
  "presets": ["latest"],
  "plugins": []
}
// es2015轉碼規則
npm install --save-dev babel-preset-es2015

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

// 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

**2 ) 安裝 babel-cli 工具,用於命令列轉碼**
npm install --global babel-cli

**3) 執行轉碼**  
babel example.js -o compile.js --presets es2015

**4) 實時監聽編譯檔案:**
$ babel example.js --watch -o compiled.js --presets es2015

3. Babel-node命令轉換並執行
例如: babel-node example.js

4. Babel-register
該模組改寫了require命令,加上了一個鉤子。此後每當使用require載入帶有.js / .jsx / .es / .es6的檔案時,就會先用babel進行轉碼
首先 npm install –save-dev babel-register
然後 require(“babel-register”)
require(“./index.js”)
此時不需要再對index.js進行轉碼

5. Babel-core


需要呼叫BABEL的API進行轉碼,就需要使用babel-core模組 (暫未用上)

6. babel-poly
babel預設只轉換新的JS語法,不轉換新的API, 比如Iterator , Generator , Set , Maps , Proxy , Reflect , Symbol , Promise 等全域性物件。 以及定義在全域性物件的方法 (比如Object.assign)

7. 瀏覽器環境以script標籤方式引入
的方式引入 ,會造成而效能下降,生產環境需要載入已經轉碼的指令碼!

相關推薦

Babel——ES6轉換

1. 線上轉換 https://babeljs.cn/ 2. 手動轉換Babel-cli 首先 npm -init **1)配置.Babelrc檔案** { "presets": ["latest"], "plugins": [

Babel 轉碼器 § es6轉換es5

exe 替代 logs 腳本文件 rip per 開發 -c class Babel 轉碼器 § es6轉換es5 實時轉碼 / Repl -babel-node / babel-register(自動轉碼引入babel-register模塊) 配置文件.babelrc

使用Babeles6轉換es5

目錄 Babel是什麼? 命令列轉換babel-cli 安裝 使用 配置檔案 babel-polyfill 安裝 在js中使用 將Babel整合到webpack中 Babel配置 webpack配置 1)安裝webpack 2)新增配置檔案 w

如何用babelES6轉換為指定的版本的ES程式碼

由於新版本的ECMASscript的強大特性,使我們寫js程式碼更加得心應手,例如:calss,let,for…of,promise等等,但可惜的是這些js新特新只被最新版本的瀏覽器支援,那麼指定範圍的低版本的瀏覽器的支援就需要一個專門的工具,babel就是這樣的一塊前端工具。 但是

gulp的ES6轉換報錯 Cannot find module 'babel-core'

解決方案:按照以下的步驟進行安裝gulp-babel一、安裝全域性的gulp及一系列工具包電腦終端執行命令:1. npm install -g gulp2. npm install  gulp --save-dev;3. npm install gulp-babel --sa

babel基礎知識,把ES6轉換為ES5的工具

1、作用:ES6 轉碼器,可以將 ES6 程式碼轉為 ES5 程式碼 2、配置檔案:.babelrc   {     "presets": [//轉碼規則       "latest",    

ES6轉換ES5

url packages lib 防止 構建工具 functions type min master 各大瀏覽器的最新版本,對 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。隨著時間的推移,支持度已經越來越高了,超過 9

babel es6轉化

babel es6.js -o compiled.js //es6.js 轉化輸出compiled.js     npm install --save-dev babel-preset-es2015 npm install --save-dev babel-p

Requirejs高階應用(一):將ES6轉換為Requirejs程式碼

既想利用ES6的先進特性,又想發揮Requirejs的AMD特性,於是想著將ES6程式碼轉換為滿足Requirejs規範的AMD程式碼,操作如下。 1. 新增Babel 在Gruntfile中新增grunt-babel支援,如下: babel: {

vue babel es6轉es5 webstrom配置

js裡面使用到es6報錯 排查 1,看看webstrom裡面的language 是否選中es6 2,如果上面步驟已設定 檢視全域性npm資料夾裡面是否有babel-cli包 或者專案裡面是否已下載依賴 或者 3,如果步驟2沒有 執行下面的命令

使用babel編譯es6

輸入 備註 基於 cti 令行 開始菜單 turn dev 創建 起因:開發中慢慢的學習使用es6,但是JavaScript需要瀏覽器來解析,而不是所有瀏覽器都支持es6,所以為了兼容es6,需要第三方工具進行編譯es6。 工具:node,gulp,gulp-babel,

WebStorm ES6 語法支持設置&babel使用及自動編譯

java led 當前 成了 ets 參考 操作 scripts ces 一、語法支持設置 Preferences > Languages & Frameworks > JavaScript 二、Babel安裝

Babel編譯es6

object target 全局環境 語法 build dev .config plugins aps Babel是一個廣泛使用的轉碼器,可以將ES6代碼轉為ES5代碼,從而在現有環境執行。 這意味著,你可以現在就用 ES6 編寫程序,而不用擔心現有環境是否支持。下面

Pycharm WebStorm 配置 babel 實現自動編譯 ECMAScript6 (es6) 文件

pycharm webstorm 配置 所需基礎node.jsnmp開始1、首先新建一個空項目,減少幹擾更快的看到配置效果。2、在項目中創建一個 man.js 文件 。進入設置:「 File Settings Languages&Frameworks JavaScript 」將 Ja

es6的箭頭函數轉換為普通函數,以及將await/async函數轉為普通函數

ins npm sync函數 set res reset gin for 箭頭 箭頭函數轉為普通函數:   1. 安裝babel-preset-es2015    npm install babel-preset-es2015 --save-dev   2.在

線性結構與樹形結構相互轉換ES6實現)

tlist 結構 fin 更多 color {} 完整 pre ID 前言   當樹形結構的層級越來越深時,操作某一節點會變得越來越費勁,維護成本不斷增加。所以線性結構與樹形的相互轉換變得異常重要!   首先,我們約定樹形結構如下: node = { id: numb

How Javascript works (Javascript工作原理) (十五) 類和繼承及 Babel 和 TypeScript 代碼轉換探秘

屬性集 重寫 details 函數調用 有趣的 feature 性能優化 mage 轉化 個人總結:讀完這篇文章需要15分鐘,文章主要講解了Babel和TypeScript的工作原理,(例如對es6 類的轉換,是將原始es6代碼轉換為es5代碼,這些代碼中包含著類似於 _c

在IDEA(phpStorm)中使用Babel編譯ES6

-s all ogr babel es6語法 適用於 進行 這一 react 安裝Babel 官方文檔建議我們根據單個項目進行本地安裝,原因是不同的項目可以依賴不同版本的 Babel,使你的項目更方便移植、更易於安裝。 在項目的根目錄下使用命令行工具(CMD等)執行下面代碼

babel轉碼ES6

目錄結構 圖片 寫入 rip console from 語法 inf define 首先可以用es-checker檢測一下本機對ES6的支持程度 npm install -g es-checker && es-checker 可見,不支持ES

Babel安裝在本地並用webstrom由ES6轉Es5

sta 根目錄 es5 技術 png com img ima tro 1進入到根目錄 2安裝babel npm install babel-cli --save-dev 3安裝其他庫 npm install --save-dev babel-preset-env 4創建.