ES6系列_1之開發環境搭建

時間 2019-11-13

原文原文鏈接

前言：

1.es6的簡單介紹：html

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式發佈了。它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。es6

2.爲何要搭建ES6的開發環境？npm

由於至今各大瀏覽器廠商所開發的 JavaScript 引擎都尚未完成對 ES2015 中全部特性的完美支持，若是直接使用的話，會報錯的。因此咱們既想使用es6帶來的新語法、新特性，又想讓如今的瀏覽器支持es6語法，因而乎像 babel等編譯器便出現了。它能將還沒有獲得支持的 ES2015 特性轉換爲 ES5 標準的代碼，使其獲得瀏覽器的支持。編程

因此使用Babel的目的即是把ES6編譯成ES5。json

創建工程目錄:

先創建一個項目的工程目錄，並在目錄下邊創建兩個文件夾：src和distwindows

src：書寫ES6代碼的文件夾，寫的js程序都放在這裏。
dist：利用Babel編譯成的ES5代碼的文件夾，在HTML頁面須要引入的時這裏的js文件。

編寫index.html:

在根目錄下面新建一個index.html文件瀏覽器

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>index</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./dist/index.js"></script>
    </head>
    <body>
        Hello ECMA Script 6
    </body>
</html>

此時引入到index.html文件中的index.js是dist目錄的文件（轉化後的文件）babel

編寫index.js

在src目錄下，新建index.js文件，相關代碼以下：ide

let a="es6";
console.log(a);

View Code

咱們用了let聲明，這裏let是ES6的一種聲明方式，接下來咱們須要把這個ES6的語法文件自動編程成ES5的語法文件。工具

初始化項目

在安裝Babel以前，須要用npm init先初始化咱們的項目。打開終端或者經過cmd打開命令行工具，進入項目目錄，輸入下邊的命令：

npm init -y

-y表明所有默認贊成，就不用一次次按回車了。命令執行完成後，會在項目根目錄下生產package.json文件。

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

能夠根據本身的須要進行修改。

全局安裝Babel-cli--命令行使用須要

在終端中輸入如下命令,若是你安裝很慢的話，可使用淘寶鏡像的cnpm來進行安裝。點擊查看關於cnpm的安裝方法

npm install -g babel-cli

這裏安裝可能會出現錯誤，這是因爲windows系統下的權限錯誤形成的。

解決方法：使用win+x,選擇命令提示符（管理員），在裏面運行命令就行了。

安裝babel-cli後，咱們執行指令

babel src/index.js -o dist/index.js

咱們雖然安裝了babel-cli，也在dist目錄下生產了index.js文件，可是仍是沒有轉化，任然是ES6的語法，咱們還須要完成如下幾步才能實現轉換

（1）本地安裝babel-preset-es2015 和 babel-cli--本地項目所需

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

安裝完成後，咱們能夠看一下咱們的package.json文件，已經多了devDependencies選項。

（2）新建.babelrc

在根目錄下新建.babelrc文件，並在文件中加入以下代碼

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

這個文件咱們創建完成後，如今能夠在終端輸入的轉換命令了，此次ES6成功轉化爲ES5的語法。

babel src/index.js -o dist/index.js

結果爲：

咱們可能會發現轉換命令過長，難以記憶，咱們能夠將命令配置到package.json，以下

 "change": "babel src/index.js -o dist/index.js"

而後可使用以下命令代替上述的長轉換命令。

npm run change

這樣，一個簡單的基本的編譯環境就OK了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。