天天看點

es6新特性_ES6核心特性前言

前言

ES6 雖提供了許多新特性,但我們實際工作中用到頻率較高并不多,根據二八法則,我們應該用百分之八十的精力和時間,好好專研這百分之二十核心特性,将會收到事半功倍的奇效

es6新特性_ES6核心特性前言

一、開發環境配置

這部分着重介紹:babel 編譯 ES6 文法,如何用 webpack 實作子產品化。

1.babel

為啥需要 babel?

ES6 提供了許多新特性,但并不是所有的浏覽器都能夠完美支援。下圖是各個浏覽器對 ES6 相容性一覽表(以 export 為例)

es6新特性_ES6核心特性前言

image

export各個浏覽器相容性一覽表

由上圖可知,有些浏覽器對于 ES6 并不是很友好,針對 ES6 的相容性問題,很多團隊為此開發出了多種文法解析轉換工具(比如 babel,jsx,traceur 等),可以把我們寫的 ES6 文法轉換成 ES5,相當于在 ES6 和浏覽器之間做了一個翻譯官。其中Babel是一個廣泛使用的轉碼器,可以将 ES6 代碼轉為 ES5 代碼,進而在現有環境執行。

如何配置 babel?

·首先要先安裝node.js,運作npm init,然後會生成package.json檔案·npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest·建立并配置.babelrc檔案//存放在項目的根目錄下,與node_modules同級·npm install -g babel-cli·babel-version
           

Babel 的配置檔案是.babelrc,存放在項目的根目錄下。該檔案用來設定轉碼規則和插件,具體内容如下:

//.babelrc檔案{ "presets": ["es2015
           

繼續閱讀