1. 程式人生 > >使用babel將es6程式碼轉成es5(二)

使用babel將es6程式碼轉成es5(二)

上節寫到環境的準備,先用es6語法寫個js檔案內容大概如下:只做個簡單測試就不寫複雜了

var a = (msg) => () => msg;

這裡寫圖片描述

第一步 從上面圖可以看出,在編譯器中輸入的程式碼有許多錯誤提醒,這是因為編譯器預設是採用ES5的標準,如果想不報錯,則需要將編譯器的語法支援調到ES6

這裡寫圖片描述

改變編譯標準後,則不會出現錯誤提醒咯
這裡寫圖片描述

第二步:在根目錄下新建一個.babelrc檔案,該檔案是babel編譯用的。檔案內容為

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

這裡寫圖片描述

第三步:輸入下面的命令

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

這裡寫圖片描述

# 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檔案,在檔案中新增”es2015”如下所示:
這裡寫圖片描述

第五步:如果沒有意外發生,應該大功告成,編譯輸出看看,輸入如下程式碼:會直接將結果在命令視窗輸出

babel es6.js

這裡寫圖片描述

如果需要將結果輸出到相應檔案中可以輸入如下命令,會在根目錄下面生成es5.js,雙擊開啟可以看到內容已經改變成我們熟悉的編寫方式了:

babel es6.js -o es5.js

這裡寫圖片描述

執行的前提 是要安裝全域性的babel cli ,如果報babel不是內部命令 則執行下面的命令:

npm install -g babel-cli

相關推薦

使用babeles6程式碼es5

上節寫到環境的準備,先用es6語法寫個js檔案內容大概如下:只做個簡單測試就不寫複雜了 var a = (msg) => () => msg; 第一步 從上面圖可以看出,在編譯器中輸入的程式碼有許多錯誤提醒,這是因為編譯器預設是採用ES5

設定Webstorm 利用babelES6自動ES5

前言:ECMAScript 6是JavaScript語言的下一代標準,已經在2015年6月正式釋出了。Mozilla公司將在這個標準的基礎上,推出JavaScript 2.0。ES6的目標,是使得JavaScript語言可以用來編寫大型的複雜的應用程式,成為企業級開發語言。

Kitti資料集VOCxml資料集格式

本文將kitti資料集中的檢測部分的資料標註轉換成voc格式的xml,用於生成caffe-ssd訓練的lmdb資料,具體資料集自己下載,標註圖片大概七千多張。 kitti格式標註及圖片轉voc格式標註及圖片(主要是扣掉了dontcare部分), 具體程式碼如下: #!/usr/bin

如何Android Studio與華為軟體開發雲程式碼倉庫無縫對接

上一章講了,如何用Android Studio以軟體開發雲程式碼倉庫為基礎,新建一個專案。接下來,這一章繼續講建好專案後,如何通過Android Studio去對華為軟體開發雲程式碼倉庫進行更新、上傳程式碼等操作。 首先,開啟Android Studio,將上一章通過

solr搜索之demo和集IKAnalyzer

solr solr搜索 ikanalyzer分詞器 ikanalyzer 1 新建demo-solr關閉運行的solr應用。進入solr目錄:D:\solr-4.10.2\example1、在example目錄下創建demo-solr文件夾;2、將./solr下的solr.xml拷貝

SparkGemFire任務

rip spec parent region turn source desc 6.2 include ADMG-2.2.1.3 - BRAVO CoA Mapping - TB Revision 7/11: If Bravo code is not numeric,

如何使用ES6開發Three.js專案

如何使用ES6開發Three.js專案(二) 之前寫過一篇文章如何使用ES6開發Three.js專案(一),這次再完善一下,並把程式碼放在GitHub上了。 three.js-es6-webpack 基於ES6開發的three.js演示專案 專案目錄: pub

【MPC5744P】S32DS中Processor Expert自動生成程式碼工具使用教程 FreeMaster除錯

對於使用除錯口,下位機不需要做任何特別的設定,直接按照連結中設定方法來設定上位機即可,注意FreeMaster只能監測下位機中的全域性變數。連結地址:https://blog.csdn.net/u010875635/article/details/84789579   若是使用

Sql Server的儲存過程與Java程式碼相連線呼叫

        我所寫的專案是使用Maven開發,在pom.xml中新增如下必要依賴:         新增com.microsoft.sqlserver的mssql-jdbc 6.2.1.jre8的依賴 <dependency> <gro

tomcat整合到eclipse中

配置tomcat(一定要先將tomcat中所有的專案清除,不然就是灰化的不能設定,先remove掉專案,然後再clean掉補伺服器) 在上邊紅色框內加入java記憶體設定命令: -Xms128m -Xmx512m -XX:PermSize=128m -XX:MaxPer

深度學習訓練資料python程式碼——資料增廣

python影象資料增強庫 Augmentor使用比較簡單,只有一些簡單的操作。 imgaug實現的功能更多,可以對keypoint, bounding box同步處理,比如你現在由一些標記好的資料,只有同時對原始圖片和標記資訊同步處理,才能有更多的標記資料進行訓練。我

用C++實現連連看程式碼原理及解析——主程式核心程式碼

這兩天研究了一下連連看遊戲的原始碼,感覺它挺簡單的,主要就是判斷選中的兩張圖片能否消去。我參考了網上的原始碼(抱歉的是,不記得當時下載的網址了,在此對原作者表示深深的歉意!),然後自己把核心程式碼整理如下,與大家共享。需要說明的是,這只是核心演算法的程式碼,介面設計和操作的程式碼見我的部落格

ES6中的解構

物件解構 let {name:a,age:b} = {age:20,name:'abc'}; //a let {name,age} = {age:20,name:'abc'}; //name let {abc:name,age:age} = {age:20,name:'abc'}; //

IL2CPP 深入講解:程式碼生成之旅

IL2CPP 深入講解:程式碼生成之旅 IL2CPP INTERNALS: A TOUR OF GENERATED CODE 這是IL2CPP深入講解系列的第二篇博文。在這篇文章中,我們會對由il2cpp產生的C++程式碼進行分析。我們會看到託管程式碼中的類在C++中如何

商品詳情介面點選跳到購物車購物車介面

//佈局檔案 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-aut

[Android6.0][RK3399] 雙屏異顯程式碼實現流程分析

Platform: RK3399 OS: Android 6.0 Version: v2016.08 LCD interface: eDP + mipi Patch Code Date: Fri, 09 Dec 2016 10:53:11

ES6】陣列的擴充套件之Array.from()和Array.of()

Array.from()Array.from方法用於將兩類物件轉為真正的陣列:類似陣列的物件和可遍歷(iterator)的物件(包括Map和Set)let arrayLike = { '0': 'a', '1': 'b', '2': 'c',

程式碼整潔之道

函式 1.函式要儘量短小,20行封頂最佳。 2.每個函式,做好一件事,只做一件事。 3.函式的語句都在痛一個抽象層級上。 4.switch語句, 5.給函式取個描述性的好名字,別怕長,別怕花時間,命名方式保持一致,使用與模組名一脈相承的短語、名詞和動詞。 6.函式引數,最理

專案拆分搭建dubbo專案dubbo專案搭建例項與應用

dubbo專案的配置根據上一篇文章,我們已經建立好兩專案一個xxx-common一個xxx-service並建立好相應的目錄結構開始配置配置檔案內容一、配置pom.xml 檔案,    (1)payment-common的pom.xml檔案配置        配置上使用的父專