先簡單說一下Babel吧
Babel是一個ES6轉碼器,可以將ES6代碼轉為ES5代碼
此篇教程是在學習阮老師的《ES6標準入門》時,不會npm的學習總結
在阮老師的教程上具體補充,通過以下幾個步驟,即可在項目中直接安裝Babel轉碼器,一行命令即可進行ES6轉碼
第一步:創建package.jsonpackage.json 文件是一個描述文件,主要有以下3個作用:
1.描述項目依賴了哪些包
2.可以使用“語義化版本規則”指明項目依賴包的版本,表明接受更新的程度
3.與其他開發者分享
另外,package.json中,至少要有兩部分內容
"name"與"version"
這里只是簡單介紹,有興趣繼續深入的話看看文尾的鏈接吧
現在我們來創建一個package.json
1.打開cmd進入項目文件,輸入"npm init" `項目下安裝package.json
運行命令后會讓你配置各個部分
name與version處直接回車的話就默認按文件名和1.0.0的版本號配置咯,其他配置可以直接回車到最后
完成后,文件夾中就會出現一個package.json
第二步:創建Babel的配置文件.babelrc.babelrc文件用于設置轉碼規則和插件,基本規則:
{ ? ? "presets":[ ], ? ? "plugins":[ ] }
因為window下不可以直接創建空文件名的文件,所以我們用另存為的方式創建這個配置文件
新建文本輸入配置:
然后另存為(注意保存類型改為所有文件)
“新建文本文檔.txt"也就可以刪掉啦,后面配置時用NotePad打開就好
第三步:安裝規則集,設置.babelrc上一步已經創建好.babelrc了,接下來我們安裝規則集
preset字段設定轉碼規則,官方給了我們多個規則集,以下是安裝命令
//最新轉碼規則 npm install --save-dev babel-preset-latest //react 轉碼規則 npm install --save-dev babel-preset-react //不同階段語法提案的轉碼規則(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中安裝的包
現在讓我們來設置.babelrc吧,如下圖
第四步:項目中安裝babel-cli,再改寫package.json安裝babel-cli前,我們先創建一個存放js的文件夾吧,放等會用來轉換的js腳本,我把它命名為jsFolder
現在,輸入npm install --save-dev babel-cli安裝babel-cli
然后改寫package.json:在scripts中加入
????"build": "babel src -d lib" src:放置原js的文件夾路徑 lib:放置轉換后js的文件路徑(沒有的話會自動創建)
按照創建的jsFolder,我們這樣子寫
ok!保存退出,現在我們可以一個命令轉換了
開始測試!
先在jsFolder中創建一個ES6代碼,我們用阮老師的例子
然后cmd中輸入npm run build
到lib中看看
嗯,然后就轉換完成了,就算jsFolder中有多個js命令,或者項目扔給其他伙伴,直接一個命令就可以完成轉換啦
參考資料:? ? ? 《ES6標準入門(第3版)》
? ? ? ?npm 與 package.json 快速入門教程:https://blog.csdn.net/u011240...?? ??? ?BB%BA
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108553.html
摘要:轉碼的配置是每位前端童鞋在日常工作中都會遇到的。簡單點來說就是在轉碼過程中,對于一些新語法,都會抽象一個個小的函數,在轉碼過程中完成替換。以上即是我總結的轉碼姿勢,如果對本篇有疑問或建議,歡迎在這里提出。 Babel 轉碼的配置是每位前端童鞋在日常工作中都會遇到的。剛開始我也是在網上搜索各種配置方法,升級到 Babel 7 的時候又折騰了一把,所以決定把自己的心得和理解記錄下來,希望能...
摘要:官方的文檔模塊受到影響的選項。官方文檔通過注入標簽將添加到。官方文檔這兩者一般都是配合在一起用的。代表圖片打包限制,這個限制并不是說超過了就不能打包,而是指當圖片大小小于限制時會自動轉成碼引用。不過它的放后面。 第一篇講了Webpack的安裝,以及配置文件的 entry,devtool,output,resolve。這篇接著說配置文件的 module。想看看第一篇的朋友可以點 這里。 ...
摘要:在做項目中一直使用的是腳手架搭建的環境,一直沒有仔細的去了解這一工具,這周末抽出一天時間通過官網還有各種博客文章算是了解了一些內容,起碼可以在項目中自己完成的配置了。不過好像目前瀏覽器端對這種諸如之類的方法支持的還不錯了。 在做項目中一直使用的是腳手架搭建的環境,一直沒有仔細的去了解 babel 這一工具,這周末抽出一天時間通過官網還有各種博客文章算是了解了一些內容,起碼可以在項目中自...
摘要:首先安裝使用時在文件頭加載然后,就不需要手動對轉碼了。 原文轉載自阮一峰教程 本文講解如何在nodejs環境下使用babel將ES6代碼轉ES5以及運行ES6的js文件 配置.babelrc文件 首先安裝es2015的presets字段 $ npm install --save-dev babel-preset-es2015 然后寫入.babelrc { presets:[ ...
閱讀 1891·2021-11-22 09:34
閱讀 3025·2021-09-28 09:35
閱讀 13430·2021-09-09 11:34
閱讀 3599·2019-08-29 16:25
閱讀 2826·2019-08-29 15:23
閱讀 2041·2019-08-28 17:55
閱讀 2431·2019-08-26 17:04
閱讀 3049·2019-08-26 12:21