javascript
JavaScript 学习笔记-- ES6学习(一)介绍以及Babel的使用
本文摘自阮一峰老師的《ECMAScript 6入門》,原文地址:http://es6.ruanyifeng.com/#docs/intro
?
ECMAScript 6 是一個泛指,含義是5.1版本后的JavaScript的下一代標準,涵蓋了ES2015, ES2016, ES2017等。
Babel轉碼器是一個廣泛使用的ES6轉碼器,可以將ES6轉碼為ES5。
?
配置文件:.babelrc
配置文件基本格式:
// .babelrc{“presets”: [],"plugins": [], }
使用babel先要安裝規則集,安裝完后加入到配置文件中。官方的規則集如下:
# ES2015轉碼規則 $ npm install --save-dev babel-preset-es2015 # react轉碼規則 $ npm install --save-dev babel-preset-react # 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{"presets": ["es2015","react","stage-2"],"plugins": []}
?
babel-ci 模塊
babel-ci模塊是在命令行中使用babel, 使用babel命令可以直接對文件進行轉碼,對于項目來說,可以直接將其寫在package.json中,然后將命令放在scripts 中。
安裝命令如下:
$ npm install --global-cli?
基本用法如下:
# 轉碼結果輸出到標準輸出 $ babel example.js# 轉碼結果寫入一個文件 # --out-file 或 -o 參數指定輸出文件 $ babel example.js --out-file compiled.js # 或者 $ babel example.js -o compiled.js# 整個目錄轉碼 # --out-dir 或 -d 參數指定輸出目錄 $ babel src --out-dir lib # 或者 $ babel src -d lib# -s 參數生成source map文件 $ babel src -d lib -s在項目中裝載和使用babel-cli:
# 安裝 $ npm install --save-dev babel-cli // package.json {// ..."devDependencies": {"babel-cli": "^6.0.0"},"scripts": {"build": "babel src -d lib"}, }?
babel-register 模塊
babel-register模塊改寫require命令,為它加上一個鉤子,此后,每當使用require加載.js, .jsx, 和.es6后綴名的文件,就會先用Babel進行轉碼:
$ npm install --save-dev babel-register require("babel-register"); require("./index.js");注意: babel-register只會對require命令加載的文件轉碼,而不會對當前文件轉碼。
?
Babel可以用于瀏覽器環境,不過從6.0版本開始,不再直接提供瀏覽器版本,而是要用構建工具構建出來。
babel 和browserify 配合使用:
{ "browserify": { "transform": [["babelify", { "presets": ["es2015"] }]] } }?
轉載于:https://www.cnblogs.com/JacobQiao/p/6200811.html
總結
以上是生活随笔為你收集整理的JavaScript 学习笔记-- ES6学习(一)介绍以及Babel的使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 测试内容url
- 下一篇: Linux 进程间通讯详解五