搭建es6開發(fā)與非開發(fā)環(huán)境babel-browser

selfimpr 發(fā)布于2019-08-20 17:38 / 913人閱讀

摘要：前言最近打算把應(yīng)用到項目中，但是如何在開發(fā)環(huán)境瀏覽器端直接運行已經(jīng)發(fā)布一段時間了，現(xiàn)在大部分是在環(huán)境運行，或者通過編譯之后運行。主要實現(xiàn)用戶能夠在瀏覽器上直接運行語法。

前言

最近打算把es6應(yīng)用到項目中，但是如何在開發(fā)環(huán)境（瀏覽器端）直接運行es6？es6已經(jīng)發(fā)布一段時間了，現(xiàn)在大部分是在node.js環(huán)境運行，或者通過babel編譯之后運行。babel-browser主要實現(xiàn)用戶能夠在瀏覽器上直接運行es6語法。

實現(xiàn)原理

通過ajax請求加載文件，在將文件內(nèi)容通過babel編譯，但是babel只能編譯es6的語法，新的api并不會編譯，所以需要借助babel-polyfill進一步編譯，但是babel-polyfill并不會編譯require和import，我封裝了一個方法來實現(xiàn)require加載文件，進而將整個es6文件在線編譯為es5運行。
babel-browser是在線編譯，運行起來會很慢，所以只能在開發(fā)環(huán)境，那線上怎么處理呢？
我們通過babel將es6文件編譯成es5，線上直接用es5代碼，下面的demo給了一個完整的線上和線下的示例：
https://github.com/baixuexiya...

如何引入文件

1、可以將文件下載到本地

git clone https://github.com/baixuexiyang/babel-browser.git

2、可以使用cdn

https://unpkg.com/[email protected]/babel-browser.min.js

3、也可以npm安裝

npm install babel-browser-king

如何使用

注意事項

require或者import加載文件只能是相對地址
script標簽的type屬性值只能是text/babel

文件地址

https://github.com/baixuexiya...

云服務(wù)器 GPU云服務(wù)器開發(fā)環(huán)境搭建搭建開發(fā)環(huán)境安卓開發(fā)環(huán)境搭建前端開發(fā)環(huán)境搭建

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

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

相關(guān)文章

ES6-開發(fā)環(huán)境搭建（1）

摘要：全局安裝本地安裝轉(zhuǎn)碼規(guī)則安裝完成后，我們可以看一下我們的文件，已經(jīng)多了選項。直接在線編譯提供一個在線編譯器，可以在線將代碼轉(zhuǎn)為代碼。古語有云：君子生非異也，善假于物；工欲善其事，必先利其器。由于有些低版本的瀏覽器還是不支持ES6語法，學習ES6，首先要學會搭建一個基本的ES6開發(fā)環(huán)境，利用工具，把ES6的語法轉(zhuǎn)變成ES5的語法。 1、使用Babel把ES6編譯成ES5 1...

android_c 2019-08-23 15:21 評論0 收藏0
webpack 項目構(gòu)建：（二）ES6 編譯環(huán)境搭建

摘要：本質(zhì)就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結(jié)果一系列轉(zhuǎn)換生成目標代碼的將目標代碼的轉(zhuǎn)換成代碼。項目構(gòu)建三開發(fā)環(huán)境本地服務(wù)器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網(wǎng) 注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學實踐過程可能會有些出入。 ??在上一章 webpack 項目構(gòu)建：（一）基本架構(gòu)搭建我們搭建了一個最基本的 webpack 項目，現(xiàn)...

marser 2019-08-22 15:08 評論0 收藏0
搭建一個es6的開發(fā)環(huán)境

摘要：前提是你已經(jīng)安裝了手動創(chuàng)建一個工作目錄以下是的內(nèi)容在目錄下創(chuàng)建一個這里寫我們的代碼接下來我們需要把語法編譯成我們?yōu)g覽器所識別的語法文件，那就用到我們的神奇在安裝之前我們要先初始化一下項目全局安裝輸入以下命令此時文件中就有的依賴了你以 1.前提是你已經(jīng)安裝了node,npm2.手動創(chuàng)建一個工作目錄 dist,src,index.html 以下是index.html的內(nèi)容 ...

jcc 2019-08-22 13:50 評論0 收藏0
如何搭建es6開發(fā)環(huán)境

摘要：安裝此過程沒有難點，略過下載完成后可以通過和來查看是否安裝成功以及版本后安裝新建一個目錄項目名稱進入該項目，然后一路回車即可。 node.js安裝此過程沒有難點，略過下載完成后可以通過node -v和npm -v來查看是否安裝成功以及版本后 webpack 安裝新建一個目錄(項目名稱), 進入該項目，npm init, 然后一路回車即可。(會生成一個package.json...

OldPanda 2019-08-23 14:26 評論0 收藏0
webpack4 的開發(fā)環(huán)境配置說明

摘要：的開發(fā)環(huán)境配置說明完整的的配置地址開發(fā)環(huán)境的搭建，總體而言就比較輕松，因為用戶就是開發(fā)者們。的做法是在的字段配置類似這樣這樣配置后，當運行時，在里通過可以取到值以來做判斷就可以啦。 webpack4 的開發(fā)環(huán)境配置說明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 開發(fā)環(huán)境的搭建，總體而言就比較輕松，因為用戶就是開發(fā)者們...

fancyLuo 2019-08-23 10:34 評論0 收藏0