es6 入門 ——— 運行環境的搭建

　　最近在看Vue的API，而後想本身着手作個項目，搭建 腳手架的時候發現，瞭解掌握 es6 又是必要的步驟，對於我這種，es5還沒摸熟的小白來講，仍是翻看了大神的書本，學了起來。這裏只是作個簡單的搭建，初步的入門。

　　因爲如今大多數瀏覽器並不能像原聲支持 es5 同樣支持 es6，因此用 es6 第一步就是須要經過 Babel 轉碼器，將 es6 代碼轉爲 es5 代碼。Babel 給咱們提供 babel-cli 工具，用於命令行轉碼，安裝命令以下，要在管理員模式下命令提示符輸入：

1 npm install --g babel-cli                                                 

　　同時咱們還須要安裝轉碼規則包， 官方提供了一些規則集，想要了解詳細的有哪些，你能夠去 阮一峯 大神的 《ECMAScript 6 入門》 這本書的第一章（1.ECMAScript 6 簡介）第六節（Babel 轉碼器）中查看，這裏我根據需求安裝的是  babel-preset-react-es2015。

　　這裏在安裝規則包以前，先建立一個 目錄，目錄名稱自定義，我這裏命名爲 babel-test，而後在此目錄下再建立兩個目錄，命名爲 es6 和 js，分別用來存放 es6 源代碼和轉碼後的 es5 代碼，文件結構以下：

　　　　

　　而後在 命令提示符裏找到這個目錄以後，使用命令 npm init -yes,結果以下圖

　　　　

　　此時 bebel-test目錄下生成一個默認的  package.json 文件，結構以下圖：

　　　　

　　而後繼續在當前目錄下執行下面的命令 安裝 es6轉碼規則包：

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

　　繼續在 es6 目錄中建立一個 test.es6 文件用於寫入 es6 源代碼。此處因爲 Babel 編譯源文件時沒有過多的限制，因此咱們能夠選擇使用 js 或者  es 做爲文件後綴名。將下面的 es6 代碼寫到 test.es6 中：　　

1 let name = 'muzi_LEE'; 2 let greeting = `hello ${name}`; 3 console.log(greeting);

　　接下來咱們就能夠用 babel 命令編譯 es6 目錄下的 test.es6 文件，輸出爲 js 目錄下的 test.js ,代碼以下所示：

1 babel es6/test.es6 --out-file js/test.js --presets es2015

　　運行成功之後，js 目錄下就會自動生成 test.js，內容就是 轉換的 es5 語法，如圖：

　　

　　到這一步，咱們的 es6 語法已經被編譯轉換成了 es5 語法，此時的 test.js 就能夠被引用了。

　　下一步，在 es6 目錄中再建立 test2.es6 文件，此時 es6 目錄下再也不是單一的文件，若是咱們想編譯整個  es6 目錄的源文件，又不想一個個文件的編譯轉換，只需使用下面的命令就能夠編譯整個目錄下的 es6 源文件到 js 目錄下，代碼以下：

1 babel es6 --out-dir js --presets es2015

　　運行結果以下圖：

　　

　　到目前爲止，咱們的代碼是在全局環境下，進行 Babel 轉碼。這意味着，若是項目要運行，全局環境必須有 Babel，也就是說項目產生了對環境的依賴。另外一方面，這樣作也沒法支持不一樣項目使用不一樣版本的 Babel。

　　解決的辦法就是講 babel-cli 安裝在本地項目之中。命令提示符找到當前目錄，在當前目錄下執行以下指令：

1 npm install babel-cli --save-dev

　　而後把 package.json 裏面的 script 修改成 以下：

1 "scripts": { 2     "build": "babel es6 --out-dir js --presets es2015"
3   }

　　修改完成以後，在轉碼的時候，就執行下面的命令便可：

1 npm run build

　　到此步， es6 的初步搭建已完成，但願對你有用，同時有什麼疑問，也能夠在評論區提出。

 

 by： 木梓李