使用Babel和WebPack設置ES6項目

在本文中，我們將考慮使用Babel和WebPack創建用於處理現代JavaScript（在Web瀏覽器中運行）的構建設置。 >

>這是確保我們的現代JavaScript代碼尤其與與其他瀏覽器更廣泛的兼容。 與大多數與Web相關的技術一樣，JavaScript一直在不斷發展。在過去的美好時光中，我們可以將幾個<script>標籤放入頁面上，也許包括jQuery和幾個插件，然後很好。 但是，自從引入ES6以來，事情變得越來越複雜。瀏覽器對較新的語言功能的支持通常是斑駁的，並且隨著JavaScript應用程序變得更加雄心勃勃，開發人員開始使用模塊來組織其代碼。反過來，這意味著，如果您今天寫現代JavaScript，則需要在您的流程中介紹一個構建步驟。 <p>> 從下面的鏈接中可以看到>，從ES6轉換為ES5大大增加了我們可以支持的瀏覽器數量。 <p> eS6兼容性<p> ES5兼容性 <p> 構建系統的目的是自動化為瀏覽器和生產準備代碼所需的工作流程。這可能包括將諸如將代碼轉換為不同標準的步驟，將SASS匯總到CSS，捆綁文件，縮小和壓縮代碼等。為了確保它們始終可重複，需要從單個命令中啟動已知序列的步驟。 <ul> <li>鑰匙要點 <li> >利用Babel和WebPack來設置現代JavaScript項目，以確保ES6代碼在更廣泛的Web瀏覽器中兼容。 > <p>首先使用package.json文件創建項目結構，然後分別將代碼整理到SRC和公共目錄中以供源和傳輸JavaScript。 >將babel安裝到將ES6轉換為ES5，針對特定的瀏覽器版本，並使用NPM腳本自動化此過程。 <h2 > >實現ES6模塊以有效地管理和模塊化JavaScript代碼，儘管與IE11這樣的較舊瀏覽器的兼容性仍然有限。 <ul >>將WebPack集成以將JavaScript模塊捆綁到單個或多個文件中，減少服務器請求並優化加載時間。 <li> 通過WebPack的觀看和Dev-Server功能增強開發工作流程，以自動重建和刷新代碼更改時瀏覽器。 <li>>先決條件 為了跟隨，您需要同時安裝node.js和NPM（它們包裝在一起）。我建議使用NVM等版本管理器來管理您的節點安裝（以下是），如果您希望獲得一些幫助，請查看Sitepoint的初學者NPM Tutorial。<h2 >>設置 <p>>在計算機上某個地方創建一個根文件夾，然後從終端/命令行中導航到其中。這將是您的<root>文件夾。 > <p>創建一個包裝。 <pre ><span >npm init -y <p>注意：-y標誌使用默認設置創建文件，這意味著您無需從命令行中完成任何常用的詳細信息。如果您願意，可以在您的代碼編輯器中更改它們。 <em>> 在您的<根>文件夾中，製作目錄SRC，SRC/JS和公共。 SRC/JS文件夾將是我們將未經處理的源代碼放置的位置，公共文件夾將是轉移代碼最終的位置。 <p>>用babel 轉移 <h2 >為了使自己前進，我們將安裝babel-cli，它提供了將ES6轉移到ES5和Babel-Preset-env的能力，這使我們能夠用轉移的代碼來定位特定的瀏覽器版本。 > <p>您現在應該在包裝中查看以下內容。 <pre ><span >npm install babel-cli babel-preset-env --save-dev >當我們在package.json文件中時，讓我們更改腳本部分以讀取這樣的腳本：<p>> <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} >這使我們能夠通過腳本致電Babel，而不是每次直接從終端中。如果您想了解有關NPM腳本及其可以做什麼的更多信息，請查看此SitePoint教程。 <p> 最後，在我們可以測試Babel是否正在做事之前，我們需要創建一個.babelrc配置文件。這是我們的babel-preset-env軟件包將引用其變形參數的內容。 > <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, >在您的<Root>目錄中創建一個新文件。 <p> >這將使每個瀏覽器的最後兩個版本以及V7或更高版本的Safari設置為babel transpile。其他選項可根據您需要支持的瀏覽器提供。 <p>> >保存了，我們現在可以使用使用ES6的示例JavaScript文件來測試內容。出於本文的目的，我修改了LeftPad的副本以在許多地方使用ES6語法：模板文字，箭頭函數，const和Let。 <p> >將其保存為src/js/leftpad.js，從您的終端運行以下內容：<pre ><span >{ <span >"presets": [ <span >[ <span >"env", <span >{ <span >"targets": { <span >"browsers": ["last 2 versions", "safari >= 7"] <span >} <span >} <span >] <span >] <span >} > <p> 如果一切都是預期的，則在您的公共文件夾中，您現在應該找到一個名為js/leftpad.js的新文件。如果您打開它，您會發現它不再包含任何ES6語法，並且看起來像這樣：<p>> <pre ><span >"use strict"; <span >function leftPad(str<span >, len, ch) { <span >const cache = [ <span >"", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" " <span >]; str <span >= str + ""; len <span >= len - str.length; <span >if (len <= 0) return str; <span >if (!ch && ch !== 0) ch = " "; ch <span >= ch + ""; <span >if (ch === " " && len < 10) <span >return () => { cache<span >[len] + str; <span >}; <span >let pad = ""; <span >while (true) { <span >if (len & 1) pad += ch; len <span >>>= 1; <span >if (len) ch += ch; <span >else break; <span >} <span >return <span >`<span >${pad}<span >${str}`; <span >} >使用ES6模塊組織代碼<p> > ES6模塊是一個JavaScript文件，其中包含您希望向另一個JavaScript文件提供的函數，對像或原始值。您從一個導出，然後導入另一個。任何嚴重的現代JavaScript項目都應考慮使用模塊。它們使您可以將代碼分解為獨立的單元，從而使事情更容易維護；它們可以幫助您避免命名空間污染；它們有助於使您的代碼更加便攜式和可重複使用。 <pre ><span >npm run build ><p>>雖然大多數ES6語法在現代瀏覽器中廣泛使用，但模塊的情況尚不如此。在撰寫本文時，它們可在Chrome，Safari（包括最新的iOS版本）和Edge中使用；它們隱藏在Firefox和Opera中的旗幟後面。 IE11也不可用（也可能永遠不會），也不是大多數移動設備。 > <p>在下一部分中，我們將研究如何將模塊集成到我們的構建設置中。 <h3 >>導出 <p>>導出關鍵字使我們能夠使我們的ES6模塊可用於其他文件，並且為我們提供了兩個選擇 - 命名和默認值。使用命名的導出，您可以每個模塊都有多個導出，並且默認導出您只有一個模塊。在您需要導出幾個值的情況下，命名的出口特別有用。例如，您可能有一個包含許多實用程序功能的模塊，需要在您的應用程序中的各個地方提供。 >因此，讓我們將左PAD文件轉換為一個模塊，然後我們可以在第二個文件中需要。 <ancy>> <p> >命名export<h4 > 要創建一個命名的導出，將以下內容添加到左派文件的底部：<ancy>> <p> >我們還可以刪除“使用嚴格”；從文件頂部聲明，因為模塊在嚴格的模式下運行。 <pre ><span >npm init -y <p>> defult Export <h4 >>由於在左板文件中只有一個函數，因此它實際上可能是使用導出默認值的好候選者： <p> 再次，您可以刪除“使用嚴格”；從文件頂部聲明。 <pre ><span >npm install babel-cli babel-preset-env --save-dev >導入<p> >要使用導出的模塊，我們現在需要將它們導入文件（模塊），我們希望在。 <h3 >>對於導出默認選項，可以根據您希望選擇的任何名稱導入導出的模塊。例如，可以像這樣導入左板模塊：> <p> 或可以將其導入另一個名稱，例如：<p>> 在功能上，兩者都可以正常工作，但是使用與導出的同一名稱或使導入可以理解的東西顯然很有意義- 也許在此的地方，導出的名稱將與另一個已經已經已經存在的變量名稱發生衝突存在於接收模塊中。 <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} <p>>對於命名的導出選項，我們必須使用與下導出相同的名稱導入模塊。對於我們的示例模塊，我們以與導出默認語法相似的方式導入它，但是在這種情況下，我們必須用捲曲括號包裝導入的名稱：<ancy>> <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, 括號是必須帶有指定出口的牙套，如果不使用它們，它將失敗。 <p>>可以在需要時更改導入的命名導出的名稱，並且要這樣做，我們需要使用import [module]作為[路徑]語法對我們的語法進行一些修改。與導出一樣，有多種方法可以做到這一點，所有這些都在MDN導入頁面上進行了詳細介紹。 。<pre ><span >npm init -y <p>>再次，名稱更改有點荒謬，但它說明了它們可以更改為任何事物的觀點。您應該始終保持良好的命名實踐，除非您當然要編寫準備基於水果的食譜的例行程序。 <h3 >消耗導出的模塊 <p>>使用導出的左PAD模塊，我在SRC/JS文件夾中創建了以下index.js文件。在這裡，我循環瀏覽一系列序列號，並將它們帶有零以將它們製成八個字符的字符串。稍後，我們將使用此信息，然後將其發佈到HTML頁面上的有序列表元素中。請注意，此示例使用默認導出語法：<ancy> <pre ><span >npm install babel-cli babel-preset-env --save-dev 就像我們之前所做的那樣，從<根>目錄運行構建腳本：<ancy>> <p> babel現在將在public/js目錄中創建一個index.js文件。與我們的LeftPad.js文件一樣，您應該看到Babel替換了所有ES6語法，僅留下ES5語法。您可能還會注意到它已將ES6模塊語法轉換為基於節點的模塊。 Exports，這意味著我們可以從命令行運行它：<pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} > <p> >您的終端現在應該記錄一個帶有零以上的字符串，以使它們全部八個字符長。完成此操作，是時候看看WebPack了。 <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, > <p>介紹Webpack並將其與Babel 集成 如前所述，ES6模塊允許JavaScript開發人員將代碼分解為可管理的塊，但其結果是必須將這些塊提供到請求瀏覽器，並可能添加數十個其他HTTP請求回到服務器- 我們真正應該避免的事情。這是webpack進來的地方。 <h2 > <ancipal是一個模塊捆綁包。它的主要目的是通過跟踪所有依賴項來處理您的應用程序，然後將它們全部包裝成一個或多個可以在瀏覽器中運行的捆綁包。但是，根據其配置方式，它可能遠不止於此。 > <p> WebPack配置圍繞四個關鍵組件：<ancy>> <p>入口點 <p>輸出位置 <ul>加載器<li> 插件<li> <li>條目：這是您應用程序的起點，從webpack可以識別其依賴項的位置。 <ancy>> >輸出：這指定您希望保存處理的捆綁包。 <ancy>> <li>加載器：這些是將一件事轉換為輸入並生成其他內容作為輸出的一種方式。它們可用於擴展WebPack的功能以處理不僅僅是JavaScript文件，因此也將其轉換為有效的模塊。 > >插件：這些用於將WebPack的功能擴展到捆綁之外的其他任務中 - 例如縮小，伸長和優化。 <p>要安裝WebPack，從您的<Root>目錄中運行以下內容：<ancy>><pre ><span >npm init -y <p>>這將在本地安裝到該項目，還可以通過添加WebPack-CLI從命令行運行WebPack。現在，您應該查看package.json文件中列出的webpack。當您在該文件中時，請按照以下方式修改腳本部分，以便它知道直接使用webpack而不是直接使用babel：> <pre ><span >npm install babel-cli babel-preset-env --save-dev 如您所見，此腳本在WebPack.config.js文件上調用，因此，讓我們在帶有以下內容的目錄中創建該腳本：<p>> <pre ><span >"devDependencies": { <span >"babel-cli": "^6.26.0", <span >"babel-preset-env": "^1.6.1" <span >} 這或多或少是WebPack所需的最簡單的配置文件。您可以看到它使用<p>entry<em>和 output<em>的部分（它可以單獨使用這些），但還包含一種模式：“開發”設置。 <antew> WebPack可以選擇使用“開發”或“生產”模式。設置模式：“開發”優化了構建速度和調試的優化，而模式：“生產”優化了運行時和輸出文件大小的執行速度。在Tobias Koppers的文章“ WebPack 4：模式和優化”中，有很好的解釋，如果您希望閱讀更多有關如何在默認設置之外配置它們的信息。 <ante>> 接下來，從public/js文件夾中刪除所有文件。然後重新運行：<p> <p>>您會看到它現在包含一個./public/bundle.js文件。不過，打開新文件，以及我們開始的兩個文件看起來相當不同。這是包含index.js代碼的文件部分。即使我們的原始作品已經進行了重大修改，但您仍然可以挑選出其變量名稱：<ancy>> <pre ><span >"scripts": { <span >"build": "babel src -d public" <span >}, 如果您從<Root>文件夾中運行節點public/js/bundle.js，您會看到您獲得與以前相同的結果。 <p>> transpliting <pre ><span >{ <span >"presets": [ <span >[ <span >"env", <span >{ <span >"targets": { <span >"browsers": ["last 2 versions", "safari >= 7"] <span >} <span >} <span >] <span >] <span >} <p>>如前所述，加載器<h3 >>允許我們將一件事轉換為其他東西。在這種情況下，我們希望ES6轉換為ES5。為此，我們還需要幾個包： <p> <em>要使用它們，Webpack.config.js需要一個模塊部分，在> output 節之後添加到它，就像： <pre ><span >"use strict"; <span >function leftPad(str<span >, len, ch) { <span >const cache = [ <span >"", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" ", <span >" " <span >]; str <span >= str + ""; len <span >= len - str.length; <span >if (len <= 0) return str; <span >if (!ch && ch !== 0) ch = " "; ch <span >= ch + ""; <span >if (ch === " " && len < 10) <span >return () => { cache<span >[len] + str; <span >}; <span >let pad = ""; <span >while (true) { <span >if (len & 1) pad += ch; len <span >>>= 1; <span >if (len) ch += ch; <span >else break; <span >} <span >return <span >`<span >${pad}<span >${str}`; <span >} <p>>這是使用正則語句來識別要與Babel-Loader一起轉移的JavaScript文件，同時將Node_Modules文件夾中的任何內容都排除在外。最後，告訴Babel-Loader使用前面安裝的Babel-Preset-env軟件包，以建立.babelrc文件中設置的變式參數。 <em>完成此操作，您可以重新運行以下內容：> <pre ><span >npm run build 然後檢查新的public/js/bundle.js，您會看到ES6語法的所有痕跡都消失了，但它仍然產生與以前相同的輸出。 <p>將其帶到瀏覽器> <p>>建立了功能正常的Webpack和Babel設置，是時候將我們所做的工作帶到瀏覽器了。需要一個小的html文件，應在下面的<root>文件夾中創建這：<ancy>><pre ><span >npm init -y <p>>沒有什麼複雜的。要注意的要點是<ol> 元素，數字的數組將在其中進行，以及<script> </script> 元素在關閉

以上是使用Babel和WebPack設置ES6項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！