Babel入門——ES6轉(zhuǎn)ES5

stdying 發(fā)布于2019-08-22 11:22 / 1426人閱讀

摘要：首先安裝使用時(shí)在文件頭加載然后，就不需要手動對轉(zhuǎn)碼了。

原文轉(zhuǎn)載自阮一峰教程

本文講解如何在nodejs環(huán)境下使用babel將ES6代碼轉(zhuǎn)ES5以及運(yùn)行ES6的js文件

配置.babelrc文件

首先安裝es2015的presets字段

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

然后寫入.babelrc

{
    "presets":[
        "es2015"
    ]
}

命令行轉(zhuǎn)碼babel-cli

$ npm install --global babel-cli

基本用法如下：

# 轉(zhuǎn)碼結(jié)果輸出到標(biāo)準(zhǔn)輸出
$ babel example.js

# 轉(zhuǎn)碼結(jié)果寫入一個(gè)文件
# --out-file 或 -o 參數(shù)指定輸出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整個(gè)目錄轉(zhuǎn)碼
# --out-dir 或 -d 參數(shù)指定輸出目錄
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 參數(shù)生成source map文件
$ babel src -d lib -s

另一種方法是將babel-cli安裝在項(xiàng)目中

$ npm install --save-dev babel-cli

然后，在package.json中加入：

{
    "scripts":{
        "build":"babel src -d lib"
    }
}

轉(zhuǎn)碼的時(shí)候，就執(zhí)行下面的命令:

$ npm run build

關(guān)于npm scripts的更多用法詳見阮一峰教程

babel-node

可以直接運(yùn)行ES6代碼

babel-node已安裝在babel-cli中，所以無須額外安裝

$ babel-node index.js

babel-node也已經(jīng)安裝在babel-cli中，無須額外安裝
同樣，改寫package.json

{
    "scripts":{
        "start":"babel-node index.js"
    }
}

babel-register

babel-register模塊改寫require命令，為它加上一個(gè)鉤子。此后，每當(dāng)使用require加載.js、.jsx、.es和.es6后綴名的文件，就會先用Babel進(jìn)行轉(zhuǎn)碼。
首先安裝：

$ npm install --save-dev babel-register

使用時(shí)在文件頭加載：

require("babel-register");
require("./index.js");

然后，就不需要手動對index.js轉(zhuǎn)碼了。

GPU云服務(wù)器云服務(wù)器 ES6入門 Babel babel cdn babel7

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92285.html

相關(guān)文章

使用gulp 進(jìn)行ES6開發(fā)

摘要：已經(jīng)轉(zhuǎn)碼成了已經(jīng)轉(zhuǎn)碼成了合并壓縮并重命名的文件使用如果我們使用了中的，通過進(jìn)行模塊化開發(fā)，那么通過轉(zhuǎn)碼后，將被轉(zhuǎn)碼成符合規(guī)范的和等，但是瀏覽器還是不認(rèn)識，這時(shí)可以使用對代碼再次進(jìn)行構(gòu)建。一說起ES6，總會順帶看到webpack、babel、browserify還有一些認(rèn)都不認(rèn)識的blabla名詞，對于gulp才會一點(diǎn)點(diǎn)的我來說，內(nèi)心簡直是崩潰的，上網(wǎng)查了一些文章，探索著用gulp搭起...

lauren_liuling 2019-08-19 17:31 評論0 收藏0
babel6 入門-配置安裝使用_byKL

摘要：入門什么是是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 babel6 入門什么是babel Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。因?yàn)閑s6比es5的代碼更為適合編寫程序,但是因?yàn)闅v史的原因,現(xiàn)在普遍的瀏覽器并不支持es6代碼(普遍支持es5),即如果你寫es6代碼之后,在瀏覽器上運(yùn)行出錯(cuò),因?yàn)闉g覽器的javas...

qianfeng 2019-08-20 14:31 評論0 收藏0
Babel 快速入門

摘要：快速體驗(yàn)安裝依賴新建文件夾，在命令行里進(jìn)入該文件夾，并執(zhí)行如下命令生成文件是內(nèi)置的一個(gè)，可通過命令行操作來編譯文件。入門為了確保轉(zhuǎn)換后的代碼能正常的運(yùn)行，最好在代碼之前引入這是一個(gè)實(shí)現(xiàn)了部分特性的包。參考中文網(wǎng)入門簡介 Babel 是一個(gè) JavaScript 編譯器，可將我們代碼中的 ES6 語法轉(zhuǎn)換為 ES5 的語法，使我們的代碼能在不支持 ES6 語法的環(huán)境中正常運(yùn)行。配合一些...

NoraXie 2019-08-22 14:57 評論0 收藏0
ES6常用語法整合

摘要：說到肯定是先介紹了，據(jù)阮一峰老師介紹到，是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將代碼轉(zhuǎn)為代碼，從而在現(xiàn)有環(huán)境執(zhí)行。輸出其他還有等可以查看阮一峰的入門 ES6也出來有一會時(shí)間了，他新增的語法糖也的確大大提高了開發(fā)者的效率，今天就總結(jié)一些自己用到最多的。說到ES6肯定是先介紹Babel了，據(jù)阮一峰老師介紹到，Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。這意...

張遷 2019-08-20 15:31 評論0 收藏0
項(xiàng)目中配置Babel轉(zhuǎn)碼器的詳細(xì)教程

先簡單說一下Babel吧 Babel是一個(gè)ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼此篇教程是在學(xué)習(xí)阮老師的《ES6標(biāo)準(zhǔn)入門》時(shí)，不會npm的學(xué)習(xí)總結(jié) 在阮老師的教程上具體補(bǔ)充，通過以下幾個(gè)步驟，即可在項(xiàng)目中直接安裝Babel轉(zhuǎn)碼器，一行命令即可進(jìn)行ES6轉(zhuǎn)碼第一步：創(chuàng)建package.json package.json 文件是一個(gè)描述文件，主要有以下3個(gè)作用： 1.描述項(xiàng)目依賴了哪些包 2...

zzbo 2019-08-26 12:21 評論0 收藏0