1. 程式人生 > >es6在window環境下的應用以及在sublime Text3裡的使用。

es6在window環境下的應用以及在sublime Text3裡的使用。

準備學習ES6,目前好像只有阮一峰老師出過比較完整的教程。

但是說實話阮老師的部署進度那一部分真心看不明白。可能我的是在window下面所以有點不一樣。

所以自己結合各方資料進行了嘗試,終於成功啦。

1.安裝node,npm。(這裡就不做詳細的介紹了,已經安裝好的就不需要安裝,沒有的話就找了一篇我覺得比較詳細和好的部落格)

建議所有的都安裝成全域性的,這樣方便你後面在任何地方使用。

http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/

上面是地址,裡面有詳細的安裝node ,npm及環境配置的介紹,非常詳細,給作者點個贊。

2.安裝es-checker。(你在使用之前得檢查一下Node對於es6的支援情況。在cmd裡面輸入下面命令:

npm -g install es-checker

安裝完成後輸入es-checker 可以看到下圖:我的node是v5.11.0版本的。

3.安裝babel。babel是一個廣泛使用的ES6轉碼器,可以將ES6程式碼轉為ES5程式碼,從而在現有環境執行。在cmd裡面輸入:

npm -g install babel

4.建立一個資料夾,然後在裡面建立一個為package.json的檔案,在檔案中輸入以下內容:

{"name":"my-project","version":"1.0.0","devDependencies": { }}

然後再cmd裡面執行如下命令:

npm --save-dev install babel-cli

再來給它個全域性的安裝:

npm -g install babel-cli

5.接下來在剛剛的資料夾裡在建立一個名為.babelrc的檔案。名字就叫.babelrc。想盡你的辦法建立然後在裡面輸入:

npm -g install babel-cli

ctrl+s儲存

接下來安裝:

npm install --save-dev babel-preset-es2015

ok所有的都安裝完畢了。來測試下:

建立一個js檔案輸入一段程式碼呀,儲存到上面建立的資料夾裡面,此時資料夾包含package.json和.babelrc

,及你的js,三個檔案。

let arr=[]; for(let i=0;i<10;i++){ arr[i]=()=>console.log(i); } arr[6]();

開啟cmd,切換到你上面的資料夾下面,執行babel-node xx.js  (xx.js是建立的js檔名)

值得一提的是,你所有執行的es6程式碼都是經過babel轉碼的,不轉碼就可以直接在Node環境下執行。但是為什麼還要說要進行babel轉碼呢,因為ES6 還沒有很好地被瀏覽器支援,所以有些得利用babel轉碼成支援的。

然後就輸出結果成功啦。

而我是個比較閒嫌麻煩的人,老在cmd執行也不是個事,所以就有下面的配置sublime Text3裡面使用:

如果不需要就不用看這裡了。

  1.開啟sublime Text3,如果是text2步驟一樣的。選擇選單Tools --> Build System --> new Build System 

然後輸入如下配置:

{ "working_dir": "${project_path:${folder}}", "selector": "source.js", "encoding": "utf-8", "shell": true, 
 "windows": { "cmd": ["babel-node", "$file"] },
 "osx": { "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""] }, 
"linux": { "cmd": ["killall node >/dev/null 2>&1; babel-node \"$file\""] } }

  點選儲存為javascript.sublime-build,儲存位置預設即可,我的是在D:\Sublime Text\Data\Packages\User 如果你不知道怎麼儲存,就找到你的sublime安裝的地方,然後裡面的data\packages\user就可以啦。

  開始我的sublime-text裡已經有一個javascript.sublime-build命名的檔案了,然後我自己替換也不影響其他使用。可能你們都沒有,不知我什麼時候建立了一個。

  然後在測試你上面的那個js檔案,按ctrl+b編譯即可。

  Ok啦。用吧。

相關推薦

es6在window環境應用以及sublime Text3的使用

準備學習ES6,目前好像只有阮一峰老師出過比較完整的教程。 但是說實話阮老師的部署進度那一部分真心看不明白。可能我的是在window下面所以有點不一樣。 所以自己結合各方資料進行了嘗試,終於成功啦。

MacLaTeX環境搭建【MacTeX + Sublime Text3 + skim】

分享圖片 單擊 選擇 很多 圖片 www. 編輯 打開 .com 系統環境 Macos Sierra 10.12.6 安裝步驟 第一步:安裝MacTeX 進入MacTeX官網(http://www.tug.org/mactex/)下載MacTeX.pkg文件。 下載完成之

lnmp環境一臺伺服器配置個專案,介面訪問時返回資料但header頭status code=500

公司一個軟體專案微信客戶端本人開發用了thinkphp3,一個api配合客戶端app使用用了thinkphp5,兩個不可合二為一,只能在一臺伺服器上配置一個客戶端入口,一個api入口。 第一步:伺服器建立平行的兩個目錄,分別放上面兩個框架的程式碼; 第二步:nginx配置訪問入口,在/etc

關於Linux環境應用生成圖片中出現亂碼的問題處理

緣由:測試環境和生產環境系統字符集都是LANG=en_US.utf8,程式在測試環境通過下述方式生成的圖片裡面的中文可以正常顯示,生產環境不行,排查原因為生產環境確認對應的字型,採取後續方法增加字型。 1、C:\Windows\Fonts下找到字型檔案simsun.ttc,重新命名為sim

(三)hadoop虛擬機器環境安裝以及配置

基礎檔案安裝及配置 上傳jdk, hadoop安裝包到linux 解壓jdk, 配置JAVA_HOME 解壓hadoop 配置HADOOP_HOME(針對全域性配置就修改/etc/profile,針

AndroidStudio環境應用程式匯入第三方so庫的方法

通過網上查詢資料,以及自己的嘗試,總結下AndroidStudio環境下,匯入第三方so庫的方法,以及常見的一些問題。 一.步驟 1. 新建Anodroid工程, File->New Project; 2.在彈出介面上選中Include C++ support 3.一

[樂意黎原創]Sublime text3 修改TAB鍵為縮排為四個空格

小樂我在用Sublime裡編寫程式碼時,需要把TAB 鍵轉換成四個空格。 哪麼在 Sublime Text3,怎麼操作呢,研究了下, 具體步驟如下:  1. 選單欄裡點選 Preferences-> Setting-User, 如圖 2. 在彈出來的文本里,新增如

學習筆記:window7環境的nodejs與npm安裝

二、開啟安裝包,安裝路徑推薦 C:\Program Files\nodejs,安裝過程一直下一步就行了(windows的安裝msi檔案在過程中會直接新增path的系統變數,變數值是你的安裝路徑,例如“C:\Program Files\nodejs”)。 三、測試安

p7zip 在Mac應用-以在sublime text3配置Java開發環境

以在sublime text3配置Java開發環境為例 先安裝好Java,sublime text 安裝方法 $ brew install p7zip 到sublime text 的包目錄下,我用的是3 cd /Applications/Sublime

基於WindowsSublime text3配置python環境

一.安裝python 下載連結:https://pan.baidu.com/s/1YHLSPf0GJculV-rbOXmOJw 對所有使用者安裝生效【可選】 新增python至環境變數中【需勾選】 Ps:若出現api-ms-win-crt-runtime

sublime text3配置java編譯環境

sublime text3下配置java編譯環境 2015年05月15日 23:51:45 張京林要加油 閱讀數:3456 標籤: sublimetextjava編譯環境配置 更多 個人分類: 存檔 版權宣告:本文為博主原創文章

MacSublime Text3配置Python3開發環境

Sublime沒有幫我們配置python3,要使用Python3的話我們需要自己配置。 Tools -> Build System -> New Build System 在開啟的檔案裡面貼上以下程式碼:  { "cmd": ["/opt/anac

UbuntuSublime Text3搭建python3.5程式設計環境小記錄

安裝環境: Ubuntu16 x64 sublime text 3 使用系統預裝的python3.5 TIPs: 1.在Ubuntu命令列終端裡輸入“which python3.5”來檢視python3.5的安裝路徑。 在我的Ubuntu裡,python預設是2.7,同時

Ubantu配置Sublime Text3---python環境的搭建

因為學習機器學習演算法的原因,買的參考書籍很多都是python語言進行開發的,因此也想著在Linux系統下配置python的環境。Sublime是一款非常流行的編輯器,可以新增很多小巧有用的外掛,同時

4.8 Sublime Text3 中配置 Python環境 --之下載安裝Sublime與配置Python環境

main 代碼 col 編程 als 數據 -- print 安裝 返回總目錄 目錄: 1.沒有配置之前 2.安裝Package Control插件 3.安裝其他庫: 4.配置其他操作: (一)沒有配置之前: 我們試著運行以下,會效果怎麽樣? 1.首先選擇Python作

Mac osxsublime text3配置C語言環境

在網上找了很久mac下C的配置,結果多少有點問題,今天終於解決了 分享出來供大家參考 開啟sublime text3,Tools/Build System/New Build system建立一個新配置檔案, { "cmd": ["gcc", "${file}", "-o

Mac OS X sublime text3中編譯執行Java程式的環境配置

在Mac下使用Sublime時,如果要編譯java檔案,直接使用command+B命令就可以達到編譯的效果,此時會在java原始檔的目錄下生成對應的.class檔案,但並不能執行Java程式碼。如何才能直接編譯並執行java程式碼呢? 1.我用的版本是os x

LinuxSublime Text3配置Python3開發環境

很是尷尬,寫的第一遍關於如何配置這個環境的部落格有很大問題,所以決定重寫一下,方便自己以後查閱(大家要是不嫌棄的話可以看看) 首先,安裝Sublime Text3 sudo add-apt-repository ppa:webupd8team/sublime-text-3 sudo

在windows環境基於sublime text3的node.js開發環境搭建

首先安裝sublime text3,百度一堆,自己找吧。理論上sublime text2應該也可以。我只能說一句:這個軟體實在是太強悍了。 跨平臺,豐富的外掛體系,加上外掛基本上就是一個強悍的ide了。目前我在使用的主要是Emmet、Python、還有一些格式化的外掛(xml,json),加上這次

Ubuntu18.04Sublime Text3安裝、破解、以及輸入中文!

一、ubunut18.04安裝Sublime Text3 任意代開一個終端,依次輸入以下命令即可安裝成功(安裝後軟體未註冊,可能會有不能輸入中文問題!詳見步驟二、三)     1. wget -qO - https://download.sublimetext.com/s