国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

zzbo / 3054人閱讀

先簡(jiǎn)單說一下Babel吧

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

此篇教程是在學(xué)習(xí)阮老師的《ES6標(biāo)準(zhǔn)入門》時(shí)，不會(huì)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.可以使用“語(yǔ)義化版本規(guī)則”指明項(xiàng)目依賴包的版本，表明接受更新的程度

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

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

"name"與"version"

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

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

1.打開cmd進(jìn)入項(xiàng)目文件，輸入"npm init" `項(xiàng)目下安裝package.json

運(yùn)行命令后會(huì)讓你配置各個(gè)部分

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

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

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

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

{

? ? "presets":[ ],

? ? "plugins":[ ]

}

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

新建文本輸入配置：

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

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

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

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

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

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

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



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

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



//不同階段語(yǔ)法提案的轉(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吧，如下圖

第四步：項(xiàng)目中安裝babel-cli,再改寫package.json

安裝babel-cli前，我們先創(chuàng)建一個(gè)存放js的文件夾吧，放等會(huì)用來轉(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的文件路徑（沒有的話會(huì)自動(dòng)創(chuàng)建）

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

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

開始測(cè)試！

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

然后cmd中輸入npm run build

到lib中看看

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

參考資料：

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/108553.html

相關(guān)文章

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

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

    JohnLui 評(píng)論0 收藏0

  • ES6常用語(yǔ)法整合

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

    張遷 評(píng)論0 收藏0

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

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

    HollisChuang 評(píng)論0 收藏0

  • 一天快速了解Babel

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

    qiangdada 評(píng)論0 收藏0

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

    摘要：首先安裝使用時(shí)在文件頭加載然后，就不需要手動(dòng)對(duì)轉(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:[ ...

    stdying 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<