成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

項目中配置Babel轉(zhuǎn)碼器的詳細(xì)教程

zzbo / 3052人閱讀

先簡單說一下Babel吧

Babel是一個ES6轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼

此篇教程是在學(xué)習(xí)阮老師的《ES6標(biāo)準(zhǔn)入門》時，不會npm的學(xué)習(xí)總結(jié)

在阮老師的教程上具體補充，通過以下幾個步驟，即可在項目中直接安裝Babel轉(zhuǎn)碼器，一行命令即可進行ES6轉(zhuǎn)碼

第一步：創(chuàng)建package.json

package.json 文件是一個描述文件，主要有以下3個作用：

1.描述項目依賴了哪些包

2.可以使用“語義化版本規(guī)則”指明項目依賴包的版本，表明接受更新的程度

3.與其他開發(fā)者分享

另外，package.json中，至少要有兩部分內(nèi)容

"name"與"version"

這里只是簡單介紹，有興趣繼續(xù)深入的話看看文尾的鏈接吧

現(xiàn)在我們來創(chuàng)建一個package.json

1.打開cmd進入項目文件，輸入"npm init" `項目下安裝package.json

運行命令后會讓你配置各個部分

name與version處直接回車的話就默認(rèn)按文件名和1.0.0的版本號配置咯，其他配置可以直接回車到最后

完成后，文件夾中就會出現(xiàn)一個package.json

第二步：創(chuàng)建Babel的配置文件.babelrc

.babelrc文件用于設(shè)置轉(zhuǎn)碼規(guī)則和插件，基本規(guī)則：

{

? ? "presets":[ ],

? ? "plugins":[ ]

}

因為window下不可以直接創(chuàng)建空文件名的文件，所以我們用另存為的方式創(chuàng)建這個配置文件

新建文本輸入配置：

然后另存為（注意保存類型改為所有文件）

“新建文本文檔.txt"也就可以刪掉啦，后面配置時用NotePad打開就好

第三步：安裝規(guī)則集，設(shè)置.babelrc

上一步已經(jīng)創(chuàng)建好.babelrc了，接下來我們安裝規(guī)則集

preset字段設(shè)定轉(zhuǎn)碼規(guī)則，官方給了我們多個規(guī)則集，以下是安裝命令

//最新轉(zhuǎn)碼規(guī)則

npm install --save-dev babel-preset-latest



//react 轉(zhuǎn)碼規(guī)則

npm install --save-dev babel-preset-react



//不同階段語法提案的轉(zhuǎn)碼規(guī)則（4選1）

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

輸入

npm install --save-dev babel-preset-latest

npm install --save-dev babel-preset-react

在4選1中選npm install --save-dev babel-preset-stage-2

。。。。安裝中。。。。。

安裝完成！

安裝完成后我們可以在package.json中安裝的包

現(xiàn)在讓我們來設(shè)置.babelrc吧，如下圖

第四步：項目中安裝babel-cli,再改寫package.json

安裝babel-cli前，我們先創(chuàng)建一個存放js的文件夾吧，放等會用來轉(zhuǎn)換的js腳本，我把它命名為jsFolder

現(xiàn)在，輸入npm install --save-dev babel-cli安裝babel-cli

然后改寫package.json：在scripts中加入

????"build": "babel src -d lib"



src：放置原js的文件夾路徑

lib：放置轉(zhuǎn)換后js的文件路徑（沒有的話會自動創(chuàng)建）

按照創(chuàng)建的jsFolder，我們這樣子寫

ok！保存退出，現(xiàn)在我們可以一個命令轉(zhuǎn)換了

開始測試！

先在jsFolder中創(chuàng)建一個ES6代碼，我們用阮老師的例子

然后cmd中輸入npm run build

到lib中看看

嗯，然后就轉(zhuǎn)換完成了，就算jsFolder中有多個js命令，或者項目扔給其他伙伴，直接一個命令就可以完成轉(zhuǎn)換啦

參考資料：

? ? ? 《ES6標(biāo)準(zhǔn)入門（第3版）》

? ? ? ?npm 與 package.json 快速入門教程：https://blog.csdn.net/u011240...?? ??? ?BB%BA

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

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

相關(guān)文章

  • Babel 7 轉(zhuǎn)碼的正確姿勢

    摘要：轉(zhuǎn)碼的配置是每位前端童鞋在日常工作中都會遇到的。簡單點來說就是在轉(zhuǎn)碼過程中，對于一些新語法，都會抽象一個個小的函數(shù)，在轉(zhuǎn)碼過程中完成替換。以上即是我總結(jié)的轉(zhuǎn)碼姿勢，如果對本篇有疑問或建議，歡迎在這里提出。 Babel 轉(zhuǎn)碼的配置是每位前端童鞋在日常工作中都會遇到的。剛開始我也是在網(wǎng)上搜索各種配置方法，升級到 Babel 7 的時候又折騰了一把，所以決定把自己的心得和理解記錄下來，希望能...

    JohnLui 評論0 收藏0

  • ES6常用語法整合

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

    張遷 評論0 收藏0

  • [Webpack并不難]使用教程（二）--- module.loaders

    摘要：官方的文檔模塊受到影響的選項。官方文檔通過注入標(biāo)簽將添加到。官方文檔這兩者一般都是配合在一起用的。代表圖片打包限制，這個限制并不是說超過了就不能打包，而是指當(dāng)圖片大小小于限制時會自動轉(zhuǎn)成碼引用。不過它的放后面。 第一篇講了Webpack的安裝，以及配置文件的 entry，devtool，output，resolve。這篇接著說配置文件的 module。想看看第一篇的朋友可以點 這里。 ...

    HollisChuang 評論0 收藏0

  • 一天快速了解Babel

    摘要：在做項目中一直使用的是腳手架搭建的環(huán)境，一直沒有仔細(xì)的去了解這一工具，這周末抽出一天時間通過官網(wǎng)還有各種博客文章算是了解了一些內(nèi)容，起碼可以在項目中自己完成的配置了。不過好像目前瀏覽器端對這種諸如之類的方法支持的還不錯了。 在做項目中一直使用的是腳手架搭建的環(huán)境，一直沒有仔細(xì)的去了解 babel 這一工具，這周末抽出一天時間通過官網(wǎng)還有各種博客文章算是了解了一些內(nèi)容，起碼可以在項目中自...

    qiangdada 評論0 收藏0

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

    摘要：首先安裝使用時在文件頭加載然后，就不需要手動對轉(zhuǎn)碼了。 原文轉(zhuǎn)載自阮一峰教程 本文講解如何在nodejs環(huán)境下使用babel將ES6代碼轉(zhuǎn)ES5以及運行ES6的js文件 配置.babelrc文件 首先安裝es2015的presets字段 $ npm install --save-dev babel-preset-es2015 然后寫入.babelrc { presets:[ ...

    stdying 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<